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 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.
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>
Esta forma es la que se usa por defecto para romper el texto o palabras.
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.
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
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 div
s 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”
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.
Hoy te voy a presentar un creador de credenciales que acabo de programar y que…
Ya te enseñé cómo convertir una aplicación web de Vue 3 en una PWA. Al…
En este artículo voy a documentar la arquitectura que yo utilizo al trabajar con WebAssembly…
En un artículo anterior te enseñé a crear un PWA. Al final, cualquier aplicación que…
Al usar Comlink para trabajar con los workers usando JavaScript me han aparecido algunos errores…
En este artículo te voy a enseñar cómo usar un "top level await" esperando a…
Esta web usa cookies.