Propiedad CSS line-break
Usa la propiedad CSS line-break para indicar dónde debe cortarse el texto. Definición, valores y ejemplos.
La propiedad CSS line-break controla cómo se rompen las líneas en texto chino, japonés y coreano (CJK) cuando el salto cae cerca de signos de puntuación o símbolos. Los sistemas de escritura CJK se ajustan de forma diferente al texto latino: no hay espacios entre palabras, por lo que una línea puede romperse casi en cualquier punto entre caracteres. El matiz está en qué caracteres pueden iniciar o terminar una línea. Ciertos signos de puntuación — como el kana pequeño (ぁ, ゃ), las marcas de iteración o los corchetes de cierre — no deben quedar solos al inicio de una línea, y line-break determina con qué rigor el navegador aplica esas convenciones.
Esta propiedad solo afecta al texto CJK. No tiene efecto visible en escrituras latinas, cirílicas u otras separadas por espacios; para esas situaciones normalmente se usan word-break, overflow-wrap o hyphens.
Cuándo usarla
Recurre a line-break cuando estés componiendo contenido CJK y necesites un control preciso sobre dónde se ajusta el texto:
strict— para maquetaciones formales o de estilo impreso donde se desean las reglas de ajuste más conservadoras.normal/loose— para columnas estrechas (pantallas móviles, barras laterales) donde romper en más caracteres evita desbordamientos incómodos.auto— deja que el navegador elija un valor predeterminado razonable. Es lo que se obtiene si nunca se establece la propiedad.
Si el texto no es CJK, esta propiedad no hace nada útil — consulta las propiedades relacionadas indicadas arriba.
| Valor inicial | auto |
|---|---|
| Se aplica a | Todos los elementos, pero solo en contenedores de bloque. |
| Se hereda | Sí. |
| Animable | No. |
| Versión | CSS3 |
| Sintaxis DOM | object.style.lineBreak = "loose"; |
Sintaxis
Sintaxis de la propiedad CSS line-break
line-break: auto | loose | normal | strict | anywhere | initial | inherit;El valor anywhere es más reciente e indica al navegador que se permite un salto entre cualquier par de caracteres tipográficos, incluido antes y después de la puntuación — útil en contenedores de ancho fijo muy estrechos. La compatibilidad con navegadores para anywhere es más limitada que la de las otras palabras clave, así que pruébalo antes de utilizarlo.
Ejemplos
El valor strict
Con strict, el navegador aplica el conjunto más restrictivo de reglas CJK de salto de línea, manteniendo la puntuación unida a los caracteres vecinos.
<!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
El valor normal
Con normal, el navegador aplica las reglas predeterminadas menos restrictivas, por lo que el mismo texto puede ajustarse en más puntos. Esto resulta útil cuando una columna es estrecha y strict provocaría desbordamiento.
<!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 | Descripción |
|---|---|
| auto | Rompe el texto usando la regla de salto de línea predeterminada del navegador. Es el valor inicial de la propiedad. |
| loose | Aplica las reglas de salto de línea más permisivas. Se usa habitualmente en líneas cortas, como en columnas de estilo periodístico. |
| normal | Aplica las reglas de salto de línea más comunes. |
| strict | Aplica las reglas de salto de línea más estrictas, manteniendo la puntuación unida a los caracteres vecinos. |
| anywhere | Se permite un salto entre cualquier par de caracteres tipográficos. Compatibilidad limitada con navegadores. |
| initial | Establece la propiedad en su valor predeterminado. |
| inherit | Hereda el valor de la propiedad del elemento padre. |
Compatibilidad con navegadores
Las palabras clave auto, loose, normal y strict son compatibles con todos los navegadores modernos. La palabra clave anywhere es más reciente y aún no está disponible en todos ellos, por lo que conviene proporcionar un valor alternativo (por ejemplo, overflow-wrap: break-word) cuando se utilice.
Propiedades relacionadas
word-break— controla si las palabras pueden romperse en mitad de la palabra, incluso en texto CJK y no CJK.overflow-wrap— permite que las cadenas largas que no se pueden romper se ajusten para evitar desbordamiento.hyphens— añade guiones para los idiomas que los utilizan.white-space— controla cómo se manejan los espacios en blanco y el ajuste de línea en general.