Tipografía
overflow-wrap
Utilidades para controlar los saltos de línea dentro de 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
Ajustar a mitad de palabra
Utiliza la utilidad wrap-break-word para permitir saltos de línea entre letras de una palabra si es necesario:
La palabra más larga en cualquiera de los principales diccionarios de la lengua inglesa 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 la silicosis.
<p class="wrap-break-word">La palabra más larga en cualquiera de los principales...</p>Ajustar 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 a mitad de 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 ajustar 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.
Ajustar normalmente
Utiliza la utilidad wrap-normal para permitir únicamente saltos de línea en puntos de ajuste naturales, como espacios, guiones y signos de puntuación:
La palabra más larga en cualquiera de los principales diccionarios de la lengua inglesa 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 la silicosis.
<p class="wrap-normal">La palabra más larga en cualquiera de los principales...</p>Diseño responsivo
Antepone a la utilidad overflow-wrap el prefijo de una variante de punto de ruptura como md: para aplicar la utilidad únicamente en tamaños de pantalla mediano y superiores:
<p class="wrap-normal md:wrap-break-word ..."> Lorem ipsum dolor sit amet...</p>Obtén más información sobre el uso de variantes en la documentación de variantes.