Salto de línea - Trucos CSS | Almanaque CSS 2024

La line-breakpropiedad CSS define cómo aplicar estrictamente las reglas para ajustar el texto en nuevas líneas, particularmente cuando se trabaja con símbolos y signos de puntuación en los sistemas de escritura chino, japonés o coreano (CJK). Se incluye en la especificación CSS Text Module Level 3, que actualmente se encuentra en el Borrador del editor.

.element ( line-break: strict; )

Manifestación

Sintaxis

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

Inicial: auto
Se aplica a: todos los elementos
Heredado: si
Valor calculado: como se especifica
Tipo de animación: 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: Esto permite que el navegador decida cómo implementa los saltos de línea. Cada navegador puede diferir en sus criterios según factores, incluida la longitud de la línea.
loose: Esta es la aplicación más ligera de las reglas de salto de línea. La especificación cita líneas cortas de texto, como las que podríamos ver en un periódico, como ejemplo en el que se podría usar este valor.
normal: Esto divide líneas de texto según el conjunto de reglas "más común". (Tenga en cuenta que no se proporciona una definición sobre cuál es el conjunto de reglas más común o qué podría contener).
strict: Esto hace cumplir el conjunto de reglas más estricto para los saltos de línea.
anywhere: Este valor habilita oportunidades de ajuste suave, lo que permite que el texto se divida en espacios o puntuación en lugar del límite de la palabra solo. Es ideal para idiomas que pueden no usar espacios o puntuación para separar palabras. La especificación dice que CSS no define oportunidades de ajuste suave, y este valor las reconoce y las aprovecha para aplicar reglas de salto de línea. La especificación describe el comportamiento de ajuste de texto como lo que normalmente vemos en una terminal.

La especificación también señala que el anywherevalor permite que los espacios en blanco preservados al final de una línea pasen a la línea siguiente cuando se usan con la white-spacepropiedad establecida en break-spaces.

Valorar el comportamiento en diferentes idiomas

Como puede imaginar, los diferentes idiomas tienen diferentes preferencias cuando se trata de cómo se divide el texto en nuevas líneas. No existe una convención estandarizada utilizada por todos los idiomas. Eso deja en manos de los navegadores descubrir y seguir las reglas "correctas" para un idioma en particular. Pero la especificación describe varios requisitos para determinar si se permite el line-breaksalto de línea en los diferentes niveles de rigor en determinadas situaciones. Los presentaremos aquí.

Situación	`normal`	`loose`	`strict`
Se rompe antes del pequeño kana japonés o la marca de sonido prolongada Katakana-Hiragana, es decir, carácter de la clase de salto de línea Unicode `CJ`	❌	✅	✅
Se interrumpe antes de ciertos caracteres tipo guión CJK: 〜 U + 301C, ゠ U + 30A0	❌	✅ si el sistema de escritura es chino o japonés	Permitido, si el sistema de escritura es chino o japonés
Se interrumpe antes de ciertos caracteres tipo guión CJK: 〜 U + 301C, ゠ U + 30A0	❌	✅ si el carácter anterior pertenece a la clase de salto de línea Unicode `ID`(incluso cuando el carácter anterior se trata como `ID`debido a`word-break: break-all)`	❌
Se rompe antes de las marcas de iteración: 々 U + 3005, 〻 U + 303B, ゝ U + 309D, ゞ U + 309E, ヽ U + 30FD, ヾ U + 30FE	❌	✅	❌
Se separa entre caracteres inseparables (como ‥ U + 2025,… U + 2026), es decir, caracteres de la clase de salto de línea Unicode `IN`	❌	✅	❌
Se interrumpe antes de ciertos signos de puntuación centrados: ・ U + 30FB, ： U + FF1A, ； U + FF1B, ･ U + FF65,‼ U + 203C,⁇ U + 2047,⁈ U + 2048,⁉ U + 2049,！ U + FF01,？ U + FF1F	❌	✅	❌
Se rompe antes de sufijos: Los personajes con la clase línea de rotura Unicode `PO`y la propiedad Ancho de Asia Oriental `Ambiguous`, `Fullwidth`o `Wide`.	❌	✅	❌
Se rompe después de prefijos: Los personajes con la clase línea de rotura Unicode `PR`y la propiedad Ancho de Asia Oriental `Ambiguous`, `Fullwidth`o `Wide`.	❌	✅	❌