Propriedade CSS line-break
Use a propriedade CSS line-break para definir onde o texto deve ser quebrado. Definição, valores e exemplos.
A propriedade CSS line-break controla como as linhas são quebradas em textos em chinês, japonês e coreano (CJK) quando a quebra ocorre próxima a pontuação ou símbolos. Os scripts CJK se comportam de forma diferente do texto latino: não há espaços entre as palavras, portanto uma linha pode quebrar em quase qualquer ponto entre os caracteres. O detalhe está em quais caracteres têm permissão de iniciar ou terminar uma linha. Certos sinais de pontuação — como o kana pequeno (ぁ, ゃ), marcas de iteração ou colchetes de fechamento — não devem ficar isolados no início de uma linha, e line-break determina com que rigor o navegador aplica essas convenções.
Esta propriedade afeta apenas texto CJK. Não tem efeito visível em scripts latinos, cirílicos ou outros separados por espaços; nesses casos, normalmente você precisará de word-break, overflow-wrap ou hyphens.
Quando usar
Use line-break ao compor conteúdo CJK e precisar de controle preciso sobre onde as linhas quebram:
strict— para layouts formais ou semelhantes a impressos, onde você deseja as regras de quebra mais conservadoras e rígidas.normal/loose— para colunas estreitas (telas móveis, barras laterais) onde quebrar em mais pontos evita overflow indesejado.auto— deixa o navegador escolher um padrão razoável. É o que você obtém se nunca definir a propriedade.
Se o seu texto não for CJK, esta propriedade não tem utilidade — consulte as propriedades relacionadas acima.
| Valor inicial | auto |
|---|---|
| Aplicável a | Todos os elementos, mas apenas em contêineres de bloco. |
| Herdado | Sim. |
| Animável | Não. |
| Versão | CSS3 |
| Sintaxe DOM | object.style.lineBreak = "loose"; |
Sintaxe
Sintaxe da propriedade CSS line-break
line-break: auto | loose | normal | strict | anywhere | initial | inherit;O valor anywhere é mais recente e indica ao navegador que uma quebra é permitida entre quaisquer dois caracteres tipográficos, incluindo antes e depois de pontuação — útil em contêineres muito estreitos de largura fixa. O suporte dos navegadores para anywhere é mais limitado do que para as outras palavras-chave, portanto, teste antes de depender dele.
Exemplos
O valor strict
Com strict, o navegador aplica o conjunto mais restritivo de regras de quebra de linha CJK, mantendo a pontuação vinculada aos caracteres vizinhos.
<!DOCTYPE html>
<html>
<head>
<style>
.korean {
line-break: strict;
}
</style>
</head>
<body>
<h2>Line-break property example</h2>
<!--Be the change you want to see in the world.-->
<span class="korean">세상에서 보고싶은 변화가 있다면 당신 스스로 그 변화가 되어라.</span>
</body>
</html>Resultado
O valor normal
Com normal, o navegador usa as regras padrão menos restritivas, permitindo que o mesmo texto quebre em mais pontos. É útil quando uma coluna é estreita e strict forçaria overflow.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
font-size: 16px;
line-height: 24px;
line-break: normal;
}
</style>
</head>
<body>
<h2>Line-break property example</h2>
<p>日本語のテキスト例です。行の折り返し位置を確認します。日本語のテキスト例です。行の折り返し位置を確認します。日本語のテキスト例です。行の折り返し位置を確認します。</p>
</body>
</html>Valores
| Valor | Descrição |
|---|---|
| auto | Quebra o texto usando a regra de quebra de linha padrão do navegador. É o valor inicial da propriedade. |
| loose | Usa as regras de quebra de linha mais flexíveis. Comumente usado para linhas curtas, como em colunas no estilo de jornais. |
| normal | Usa as regras de quebra de linha mais comuns. |
| strict | Usa as regras de quebra de linha mais rígidas, mantendo a pontuação vinculada aos caracteres vizinhos. |
| anywhere | Uma quebra é permitida entre quaisquer dois caracteres tipográficos. Suporte limitado nos navegadores. |
| initial | Define a propriedade com seu valor padrão. |
| inherit | Herda o valor da propriedade do elemento pai. |
Suporte dos navegadores
As palavras-chave auto, loose, normal e strict são suportadas em todos os navegadores modernos. A palavra-chave anywhere é mais recente e ainda não é suportada em todos os navegadores, portanto, forneça um fallback (por exemplo, overflow-wrap: break-word) ao utilizá-la.
Propriedades relacionadas
word-break— controla se as palavras podem ser quebradas no meio, inclusive para texto CJK e não CJK.overflow-wrap— permite que sequências longas e não quebráveis sejam envolvidas para evitar overflow.hyphens— adiciona hifenização para idiomas que a utilizam.white-space— controla como os espaços em branco e as quebras de linha são tratados de forma geral.