salto de linea

La line-breakpropiedad CSS define cuán estrictamente se deben aplicar las reglas para ajustar el texto en nuevas líneas, particularmente cuando se trabaja con símbolos y clasificación en los sistemas de escritura chino, japonés o coreano (CJK). Está incluido en la especificación CSS Text Module Level 3, que se encuentra actualmente en 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: según lo especificado
• Tipo de animación: discreta

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 al navegador decidir cómo implementar 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 de dónde podría usarse este valor.
• normal: Esto divide líneas de texto según el conjunto de reglas “más comunes”. (Tenga en cuenta que no se proporciona ninguna definición sobre cuál es el conjunto de reglas más común o qué podría contener).
• strict: Esto aplica el conjunto más estricto de reglas para saltos de línea.
• anywhere: este valor habilita oportunidades de ajuste suave, que permiten que el texto se rompa en espacios o signos de puntuación en lugar de limitarse únicamente al límite de la palabra. Es ideal para idiomas que quizás no utilicen 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 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 conservados al final de una línea pasen a la siguiente línea cuando se usan con la white-spacepropiedad establecida en break-spaces.

Comportamiento de valores en diferentes idiomas

Como puedes imaginar, los diferentes idiomas tienen diferentes preferencias en cuanto a 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 salto de línea en los diferentes niveles de line-breakrigor en determinadas situaciones. Los presentaremos aquí.

Situación	normal	loose	strict
Se rompe antes del kana pequeño japonés o de la marca de sonido prolongado 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 IDdebido aword-break: break-all)	❌
Se rompe antes de las marcas de iteración: 々 U+3005, 〻 U+303B, ゝ U+309D, ゞ U+309E, ヽ U+30FD, ヾ U+30FE.	❌	✅	❌
Saltos entre caracteres inseparables (como ‥ U+2025,… U+2026), es decir, caracteres de la clase de salto de línea UnicodeIN	❌	✅	❌
Se rompe 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	❌	✅	❌
Saltos antes de sufijos: caracteres con la clase de salto de línea Unicode POy la propiedad Ancho de Asia Oriental Ambiguous, Fullwidtho Wide.	❌	✅	❌
Saltos después de prefijos: caracteres con la clase de salto de línea Unicode PRy la propiedad Ancho de Asia Oriental Ambiguous, Fullwidtho Wide.	❌	✅	❌

ES DECIR	Borde	Firefox	cromo	Safari	Ópera
6+	14+	69+	Hacer	Hacer	15+

androidcromo	Android Firefox	Navegador de Android	Safari en iOS	Ópera móvil
85+	No	81+	Hacer	59+

Propiedades relacionadas

desbordamiento de bloque

.element { block-overflow: clip; } Geoff Graham

puntuación colgante

blockquote p { hanging-punctuation: first; } Chris Coyier

guiones

.element { hyphens: auto; } Sara Cope

envoltura de desbordamiento

.element { overflow-wrap: break-word; } Luis Lázaro

espacio de letras

/element { letter-spacing: .0625em; } Sara Cope

desbordamiento

.element { overflow: hidden; } Sara Cope

guion de texto

Sara Cope

espacio en blanco

Sara Cope

salto de palabra

.element { word-break: break-all; } Chris Coyier

modo de escritura

.element { writing-mode: vertical-rl; } Robin Rendle