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 | manual | 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.
Working Draft 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