Quebra de linha - CSS-Tricks | CSS Almanac 2025

A line-breakpropriedade CSS define como aplicar estritamente as regras de quebra de texto em novas linhas, especialmente ao trabalhar com símbolos e pontuações em sistemas de escrita em chinês, japonês ou coreano (CJK). Ele está incluído na especificação CSS Text Module Nível 3, que está atualmente no Editor's Draft.

.element ( line-break: strict; )

Demo

Sintaxe

line-break: auto | loose | normal | strict | anywhere;

Inicial: auto
Aplica-se a: todos os elementos
Herdado: sim
Valor calculado: conforme especificado
Tipo de animação: discreto

Valores

/* Keyword values */ line-break: auto; line-break: loose; line-break: normal; line-break: strict; line-break: anywhere; /* Global values */ line-break: inherit; line-break: initial; line-break: unset;

auto: Isso permite que o navegador decida como implementa as quebras de linha. Cada navegador pode diferir em seus critérios com base em fatores, incluindo o comprimento da linha.
loose: Esta é a aplicação mais leve das regras de quebra de linha. A especificação cita linhas curtas de texto, como as que podemos ver em um jornal, como um exemplo em que esse valor pode ser usado.
normal: Isso quebra as linhas de texto com base no conjunto de regras “mais comum”. (Observe que não há uma definição fornecida sobre qual é o conjunto de regras mais comum ou o que ele pode conter.)
strict: Isso impõe o conjunto mais estrito de regras para quebras de linha.
anywhere: Este valor ativa oportunidades de quebra automática, que permitem que o texto quebre em espaços ou pontuação em vez de apenas no limite da palavra. É ideal para idiomas que não usam espaços ou pontuação para separar palavras. A especificação diz que o CSS não define oportunidades de quebra suave e esse valor as reconhece e as aproveita para aplicar regras de quebra de linha. A especificação descreve o comportamento de quebra automática de texto como o que normalmente vemos em um terminal.

A especificação também observa que o anywherevalor permite que espaços em branco preservados no final de uma linha quebrem para a próxima linha quando usado com a white-spacepropriedade definida como break-spaces.

Valorize o comportamento em diferentes idiomas

Como você pode imaginar, idiomas diferentes têm preferências diferentes quando se trata de como o texto é dividido em novas linhas. Não existe uma convenção padronizada usada por todos os idiomas. Isso deixa aos navegadores a tarefa de descobrir e seguir as regras “corretas” para um determinado idioma. Mas a especificação descreve vários requisitos para determinar se a quebra de linha é permitida nos diferentes níveis de line-breakrigidez em certas situações. Vamos apresentá-los aqui.

Situação	`normal`	`loose`	`strict`
Quebra antes do pequeno kana japonês ou da marca sonora prolongada Katakana-Hiragana, ou seja, caractere da classe de quebra de linha Unicode `CJ`	❌	✅	✅
Quebra antes de certos caracteres CJK semelhantes a hífen: 〜 U + 301C, ゠ U + 30A0	❌	✅ se o sistema de escrita for chinês ou japonês	Permitido, se o sistema de escrita for chinês ou japonês
Quebra antes de certos caracteres CJK semelhantes a hífen: 〜 U + 301C, ゠ U + 30A0	❌	✅ se o caractere anterior pertencer à classe de quebra de linha Unicode `ID`(incluindo quando o caractere anterior for tratado como `ID`devido a`word-break: break-all)`	❌
Quebra antes das marcas de iteração: 々 U + 3005, 〻 U + 303B, ゝ U + 309D, ゞ U + 309E, ヽ U + 30FD, ヾ U + 30FE	❌	✅	❌
Quebra entre caracteres inseparáveis (como ‥ U + 2025,… U + 2026) ou seja, caracteres da classe de quebra de linha Unicode `IN`	❌	✅	❌
Quebra antes de certos sinais de pontuação centralizados: ・ U + 30FB, ： U + FF1A, ； U + FF1B, ･ U + FF65,‼ U + 203C,⁇ U + 2047,⁈ U + 2048,⁉ U + 2049,！ U + FF01,？ U + FF1F	❌	✅	❌
Fracturas antes de sufixos: Personagens com a classe linha de quebra Unicode `PO`ea propriedade do Leste Asiático Largura `Ambiguous`, `Fullwidth`ou `Wide`.	❌	✅	❌
Breaks após prefixos: Personagens com a classe linha de quebra Unicode `PR`ea propriedade do Leste Asiático Largura `Ambiguous`, `Fullwidth`ou `Wide`.	❌	✅	❌