Tipografía
overflow-wrap
Utilidades para controlar los saltos de línea dentro de las palabras en un elemento que se desborda.
| Clase | Estilos |
|---|---|
wrap-break-word | overflow-wrap: break-word; |
wrap-anywhere | overflow-wrap: anywhere; |
wrap-normal | overflow-wrap: normal; |
Ejemplos
Salto en medio de la palabra
Usa la utilidad wrap-break-word para permitir saltos de línea entre letras en una palabra si es necesario:
La palabra más larga en cualquiera de los principales diccionarios del idioma inglés es pneumonoultramicroscopicsilicovolcanoconiosis, una palabra que se refiere a una enfermedad pulmonar contraída por la inhalación de partículas de sílice muy finas, específicamente de un volcán; médicamente, es lo mismo que silicosis.
<p class="wrap-break-word">La palabra más larga en cualquiera de los principales...</p>Salto en cualquier lugar
La utilidad wrap-anywhere se comporta de manera similar a wrap-break-word, excepto que el navegador tiene en cuenta los saltos de línea en medio de la palabra al calcular el tamaño intrínseco del elemento:
wrap-break-word
Jay Riemenschneider
jason.riemenschneider@vandelayindustries.com
wrap-anywhere
Jay Riemenschneider
jason.riemenschneider@vandelayindustries.com
<div class="flex max-w-sm"> <img class="size-16 rounded-full" src="/img/profile.jpg" /> <div class="wrap-break-word"> <p class="font-medium">Jay Riemenschneider</p> <p>jason.riemenschneider@vandelayindustries.com</p> </div></div><div class="flex max-w-sm"> <img class="size-16 rounded-full" src="/img/profile.jpg" /> <div class="wrap-anywhere"> <p class="font-medium">Jay Riemenschneider</p> <p>jason.riemenschneider@vandelayindustries.com</p> </div></div>Esto es útil para envolver texto dentro de contenedores flex, donde normalmente necesitarías establecer min-width: 0 en el elemento hijo para permitir que se encoja por debajo del tamaño de su contenido.
Salto normal
Usa la utilidad wrap-normal para permitir saltos de línea solo en puntos de salto naturales, como espacios, guiones y puntuación:
La palabra más larga en cualquiera de los principales diccionarios del idioma inglés es pneumonoultramicroscopicsilicovolcanoconiosis, una palabra que se refiere a una enfermedad pulmonar contraída por la inhalación de partículas de sílice muy finas, específicamente de un volcán; médicamente, es lo mismo que silicosis.
<p class="wrap-normal">La palabra más larga en cualquiera de los principales...</p>Diseño Responsive
Prefija una utilidad overflow-wrap con una variante de breakpoint como md: para aplicar la utilidad solo en tamaños de pantalla medium y superiores:
<p class="wrap-normal md:wrap-break-word ..."> Lorem ipsum dolor sit amet...</p>Aprende más sobre el uso de variantes en la documentación de variantes.