Salto de palabra - Trucos CSS | Almanaque CSS 2024

La word-breakpropiedad en CSS se puede usar para cambiar cuándo deberían ocurrir saltos de línea. Normalmente, los saltos de línea en el texto solo pueden ocurrir en ciertos espacios, como cuando hay un espacio o un guión.

En el siguiente ejemplo, podemos hacer word-breakentre letras en su lugar:

p ( word-break: break-all; )

Si luego establecemos el ancho del texto en uno em, la palabra se dividirá por cada letra:

Vea el texto de Configuración del lápiz verticalmente con salto de palabras de CSS-Tricks (@ css-tricks) en CodePen.

Este valor se usa a menudo en lugares con contenido generado por el usuario para que las cadenas largas no corran el riesgo de romper el diseño. Un ejemplo muy común es una copia larga y una URL pegada. Si esa URL no tiene guiones, puede extenderse más allá del cuadro principal y verse mal o, peor aún, causar problemas de diseño.

Vea los enlaces de corrección de lápiz con salto de palabras de CSS-Tricks (@ css-tricks) en CodePen.

Valores

normal: use las reglas predeterminadas para dividir palabras.
break-all: cualquier palabra / letra puede pasar a la siguiente línea.
keep-all: para chino, japonés y coreano, las palabras de texto no están rotas. De lo contrario, esto es lo mismo que normal.

Esta propiedad también se usa a menudo junto con la propiedad de guiones, de modo que cuando se producen interrupciones se inserta un guión, según el estándar en los libros.

El uso completo, con los prefijos de proveedor necesarios, es:

 -ms-word-break: break-all; word-break: break-all; /* Non standard for WebKit */ word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto;

El uso de estas propiedades en el selector universal puede resultar útil si tiene un sitio con mucho contenido generado por el usuario. Aunque es una advertencia justa, puede parecer extraño en títulos y texto preformateado (

Relacionado

envoltura de desbordamiento
guiones
espacio en blanco
Manejo de URL y palabras largas

Soporte del navegador

Estos datos de soporte del navegador son de Caniuse, que tiene más detalles. Un número indica que el navegador admite la función en esa versión en adelante.