1. Tipografía
  2. hyphens

Tipografía

hyphens

Utilidades para controlar cómo se deben dividir las palabras con guiones.

ClaseEstilos
hyphens-none
hyphens: none;
hyphens-manual
hyphens: manual;
hyphens-auto
hyphens: auto;

Ejemplos

Prevenir la división por guiones

Utiliza la utilidad hyphens-none para evitar que las palabras se dividan por guiones incluso si se utiliza la sugerencia de salto de línea ­:

Reconocida oficialmente por el diccionario Duden como la palabra más larga en alemán, Kraftfahrzeug­haftpflichtversicherung es una palabra de 36 letras para referirse al seguro de responsabilidad civil de vehículos motorizados.

<p class="hyphens-none">  ... Kraftfahrzeug&shy;haftpflichtversicherung es un ...</p>

División manual por guiones

Utiliza la utilidad hyphens-manual para establecer puntos de división con guiones solo donde se utiliza la sugerencia de salto de línea &shy;:

Reconocida oficialmente por el diccionario Duden como la palabra más larga en alemán, Kraftfahrzeug­haftpflichtversicherung es una palabra de 36 letras para referirse al seguro de responsabilidad civil de vehículos motorizados.

<p class="hyphens-manual">  ... Kraftfahrzeug&shy;haftpflichtversicherung es un ...</p>

Este es el comportamiento por defecto del navegador.

División automática por guiones

Utiliza la utilidad hyphens-auto para permitir que el navegador elija automáticamente los puntos de división con guiones en función del idioma:

Reconocida oficialmente por el diccionario Duden como la palabra más larga en alemán, Kraftfahrzeughaftpflichtversicherung es una palabra de 36 letras para referirse al seguro de responsabilidad civil de vehículos motorizados.

<p class="hyphens-auto" lang="de">  ... Kraftfahrzeughaftpflichtversicherung es un ...</p>

La sugerencia de salto de línea &shy; se preferirá sobre los puntos de división automática por guiones.

Responsive design

Antepone a la utilidad hyphens 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="hyphens-none md:hyphens-auto ...">  Lorem ipsum dolor sit amet...</p>

Obtén más información sobre el uso de variantes en la documentación de variantes.

Copyright © 2026 Tailwind Labs Inc.·Política de marcas registradas