word wrap en CSS – Ejemplos de estilo

word-break en CSS - break-all, break-word y normal

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.

Estoy aquí para ayudarte 🤝💻

Estoy aquí para ayudarte en todo lo que necesites. Si requieres alguna modificación en lo presentado en este post, deseas asistencia con tu tarea, proyecto o precisas desarrollar un software a medida, no dudes en contactarme. Estoy comprometido a brindarte el apoyo necesario para que logres tus objetivos. Mi correo es parzibyte(arroba)gmail.com, estoy como@parzibyte en Telegram o en mi página de contacto

No te pierdas ninguno de mis posts 🚀🔔

Suscríbete a mi canal de Telegram para recibir una notificación cuando escriba un nuevo tutorial de programación.

parzibyte

Programador freelancer listo para trabajar contigo. Aplicaciones web, móviles y de escritorio. PHP, Java, Go, Python, JavaScript, Kotlin y más :) https://parzibyte.me/blog/software-creado-por-parzibyte/