Propiedad word-wrap en CSS
En este post te mostraré a usar la propiedad word-wrap en CSS para romper palabras en un párrafo o texto.
Veremos los 3 métodos de word-wrap en CSS: break-all, normal y break-word.
¿Para qué sirve word-wrap en CSS?
Para romper las palabras si las mismas sobrepasan el ancho de su contenedor. Es decir, si la palabra rebasa el ancho de su contenedor, la misma se corta o rompe, y se muestra abajo, en la siguiente línea.
Formas de usar word-wrap
Simplemente se especifica en los estilos. Por ejemplo:
p{
word-break: break-all
}
O directamente en el elemento:
<div style="word-break: break-all;">
<p>Soy un párrafo</p>
</div>normal
Esta forma es la que se usa por defecto para romper el texto o palabras.
break-all
Esta forma se utiliza cuando queremos romper el contenido en cualquier carácter, sin importar que la cadena quede truncada “a medias”
Por ejemplo, si escribimos “Hola mundo” y no cabe, tal vez se mostraría “Hola mu” y abajo “ndo”. Veremos más en el ejemplo.
Funciona bien para cuando agregamos estilos a texto que puede contener algo como un enlace o una palabra muy larga sin espacios.
break-word
Rompe el texto pero en una palabra, no en cualquier letra. Es decir, no corta palabras, sino que usa el espacio como delimitador.
Por ejemplo, si tenemos “Hola mundo” y no cabe, se dejaría “Hola” en una línea y “mundo” en otra
Ejemplo de word-wrap
Ahora veamos un ejemplo de uso de word-wrap. Para este caso puse el estilo dentro del elemento, pero bien se puede poner dentro de una hoja de estilos, separarlo por clases y todo eso.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Demostrar word wrap</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<p>Con <code>word-break: break-all</code></p>
<div style="word-break:break-all;width: 100px;border:1px solid black;">
<p>No olvides visitar: <br>https://parzibyte.me/blog/2017/09/10/imprimir-ticket-en-impresora-termica-php/</p>
</div>
<p>Con <code>word-break: normal</code></p>
<div style="word-break:normal;width: 100px;border:1px solid black;">
<p>No olvides visitar: <br>https://parzibyte.me/blog/2017/09/10/imprimir-ticket-en-impresora-termica-php/</p>
</div>
<p>Con <code>word-break: break-word</code></p>
<div style="word-break:break-word;width: 100px;border:1px solid black;">
<p>No olvides visitar: <br>https://parzibyte.me/blog/2017/09/10/imprimir-ticket-en-impresora-termica-php/</p>
</div>
</body>
</html>He colocado el texto dentro de divs con anchura fija. También he colocado un enlace (para no tener palabras con espacios)
La salida es:
Vemos una diferencia entre break-word y break-all, pues en el primer ejemplo la palabra se corta en “visi” de “visitar” y en el segundo, como se sabe que no alcanzará el ancho del contenedor, se corta en “olvides”
Más estilos
Además de los expuestos aquí, existe el modo inherit, initial y keep-all pero no son relevantes para esto.
Sin embargo, si quieres leer más sobre ello, puedes aprender más aquí.
Te invito a ver más sobre CSS o HTML en mi blog.
