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.
El día de hoy te mostraré cómo crear un servidor HTTP (servidor web) en Android…
En este post te voy a enseñar a designar una carpeta para imprimir todos los…
En este artículo te voy a enseñar la guía para imprimir en una impresora térmica…
Hoy te voy a mostrar un ejemplo de programación para agregar un módulo de tasa…
Los usuarios del plugin para impresoras térmicas pueden contratar licencias, y en ocasiones me han…
Hoy voy a enseñarte cómo imprimir el € en una impresora térmica. Vamos a ver…
Esta web usa cookies.