Propiedad line-break de CSS
La propiedad line-break especifica cómo romper las líneas de texto en chino, japonés o coreano (CJK) al trabajar con puntuación y símbolos. Dado que estos idiomas siguen reglas tipográficas diferentes, los saltos de línea pueden no ocurrir siempre en los puntos esperados. Por ejemplo, cuando se establece en strict, los saltos de línea solo están permitidos en puntos específicos, como después de ciertas marcas de puntuación, en lugar de antes de guiones o caracteres arbitrarios. La especificación de CSS define reglas específicamente para el texto en chino, japonés y coreano (CJK).
| Valor inicial | auto |
|---|---|
| Se aplica a | Todos los elementos, pero solo en contenedores de bloque. |
| Heredable | 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 | initial | inherit;Ejemplo de la propiedad line-break:
Ejemplo de la propiedad CSS line-break con el valor strict
<!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
Ejemplo de la propiedad line-break con el valor "normal":
Ejemplo de la propiedad CSS line-break con el valor normal
<!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. Este es el valor inicial de la propiedad. |
| normal | Rompe el texto usando las reglas de salto de línea menos restrictivas. |
| loose | Rompe el texto usando las reglas de salto de línea más comunes. |
| strict | Rompe el texto usando las reglas de salto de línea más restrictivas. |
| initial | Establece la propiedad en su valor predeterminado. |
| inherit | Hereda la propiedad de su elemento principal. |
Práctica
¿Cuál de las siguientes formas se puede usar para insertar un salto de línea en CSS?