hyphens

La propiedad CSS hyphens especifica c贸mo deben dividirse las palabras cuando el texto se ajusta a trav茅s de m煤ltiples l铆neas. Puede impedir la separaci贸n de s铆labas por completo, usar guiones manualmente en puntos espec铆ficos del texto o dejar que el navegador inserte los guiones autom谩ticamente donde corresponda.

Las reglas de separaci贸n sil谩bica son espec铆ficas del idioma. En HTML, el idioma es determinado por el atributo lang y los navegadores separar谩n 煤nicamente si este atributo est谩 presente y si existe un diccionario de separaci贸n sil谩bica adecuado. En XML debe usarse el atributo xml:lang.

Nota: Las reglas que definen c贸mo se realiza la separaci贸n de s铆labas no est谩n expl铆citamente definidas por la especificaci贸n, por lo que esta puede variar de un navegador a otro.

Sintaxis

/* Keyword values */
hyphens: none;
hyphens: manual;
hyphens: auto;

/* Global values */
hyphens: inherit;
hyphens: initial;
hyphens: unset;

La propiedad hyphens se especifica con una 煤nica palabra de la lista a continuaci贸n.

Valores

none
Las palabras no se separan en los finales de l铆nea, incluso si las letras dentro de las palabras sobrepasan el final de la l铆nea. Las l铆neas solo se distribuyen en el espacio en blanco.
manual
Las palabras se separan para el ajuste de l铆nea s贸lo cuando los caracteres dentro de la palabra sugieren oportunidades de salto de l铆nea. Ver Sugiriendo oportunidades de separaci贸n de l铆nea m谩s abajo para detalle.
auto
El navegador es libre de separar palabras en puntos de separaci贸n apropiados, siguiendo cualquiera de las reglas elegidas. Sin embargo, las oportunidades de separaci贸n de l铆nea (ver Sugiriendo oportunidades de separaci贸n de l铆nea m谩s abajo) anular谩n la separaci贸n autom谩tica cuando exista.

Nota: El comportamiento del valor auto depender谩 de que el idioma est茅 bien etiquetado de manera que las reglas de separaci贸n sil谩bica puedan ser seleccionadas. Se debe especificar el idioma con el atributo lang de HTML de cara a garantizar que la separaci贸n sil谩bica autom谩tica se aplique en ese idioma.

Sintaxis formal

none | (en-US) manual | (en-US) auto

Sugiriendo oportunidades de separaci贸n de l铆nea

Hay dos caracteres Unicode que pueden ser usados manualmente para especificar un potencial punto de separaci贸n de l铆nea dentro del texto:

U+2010 (HYPHEN)
El car谩cter "fuerte" de separaci贸n de l铆nea indica una oportunidad de separaci贸n visible. Incluso si la l铆nea no est谩 realmente separada en ese momento, se muestra el gui贸n.
U+00AD (SHY)
Un car谩cter invisible y "suave" de separaci贸n de l铆nea. Este car谩cter no se renderiza de manera visible; en lugar de ello, indica la posici贸n en la que el navegador deber铆a separar la palabra en caso de requerir separaci贸n de l铆nea. En HTML puedes usar ­ para insertar una separaci贸n "suave".

Ejemplo

Este ejemplo usa tres clases, una por cada posible configuraci贸n de la propiedad hyphens.

HTML

<ul>
  <li><code>none</code>: sin separaci贸n; se desbordar谩 si es preciso
    <p lang="es" class="none">Una extrema&shy;damente larga palabra</p>
  </li>
  <li><code>manual</code>: separaci贸n s贸lo en &amp;hyphen; o &amp;shy; (si fuera necesario)
    <p lang="es" class="manual">Una extrema&shy;damente larga palabra</p>
  </li>
  <li><code>auto</code>: separar谩 donde decida el algoritmo (si fuera necesario)
    <p lang="enes class="auto">Una extrema&shy;damente larga palabra</p>
  </li>
</ul>

CSS

p {
  width: 55px;
  border: 1px solid black;
 }
p.none {
  -webkit-hyphens: none;
  -ms-hyphens: none;
  hyphens: none;
}
p.manual {
  -webkit-hyphens: manual;
  -ms-hyphens: manual;
  hyphens: manual;
}
p.auto {
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
}

Resultado

Especificaciones

Especificaci贸n Estado Comentario
CSS Text Module Level 3
La definici贸n de 'hyphens' en esta especificaci贸n.
Candidate Recommendation Initial definition

Valor inicialmanual
Applies toall elements
Heredableyes
Valor calculadocomo se especifica
Animation typediscrete

Compatibilidad de navegadores

BCD tables only load in the browser

Ver tambi茅n