hyphens

Baseline 2023 *
Newly available

Since September 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Some parts of this feature may have varying levels of support.

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.

Pruébalo

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

css
/* 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

hyphens = 
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

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="es" class="auto">Una extrema&shy;damente larga palabra</p>
  </li>
</ul>

CSS

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

Specification
CSS Text Module Level 3
# hyphens-property

Compatibilidad con navegadores

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
hyphens
auto value
Hyphenation dictionary for Afrikaans (af, af-*)
Hyphenation dictionary for Albanian (sq, sq-*)
Hyphenation dictionary for Ahmaric (am, am-*)
Hyphenation dictionary for Armenian (hy, hy-*)
Hyphenation dictionary for Assamese (as, as-*)
Hyphenation dictionary for Basque (be, be-*)
Hyphenation dictionary for Belarusian (be, be-*)
Hyphenation dictionary for Bengali (bn, bn-*)
Hyphenation dictionary for Bosnian, Serbian, and Serbo-Croatian (sh, sh-*, sr, sr-*, bs, bs-*)
Hyphenation dictionary for Bulgarian (bg, bg-*)
Hyphenation dictionary for Catalan (ca, ca-*)
Hyphenation dictionary for Croatian (hr, hr-*)
Hyphenation dictionary for Mongolian (Cyrillic) (mn-cyrl, mn-cyrl-*)
Hyphenation dictionary for Czech (cs, cs-*)
Hyphenation dictionary for Danish (da, da-*)
Hyphenation dictionary for Dutch (nl, nl-*)
Hyphenation dictionary for English (en, en-*)
Hyphenation dictionary for Esperanto (eo, eo-*)
Hyphenation dictionary for Estonian (et, et-*)
Hyphenation dictionary for Ethiopic script (mul-ethi, mul-ethi-*)
Hyphenation dictionary for Ethiopic script (und-ethi, und-ethi-*)
Hyphenation dictionary for Finnish (fi, fi-*)
Hyphenation dictionary for French (fr, fr-*)
Hyphenation dictionary for Galician (gl, gl-*)
Hyphenation dictionary for Georgian (ka, ka-*)
Hyphenation dictionary for German, Reformed Orthography of 1996 (de, de-1996, de-DE, de-AT, de-*)
Hyphenation dictionary for German, Swiss Orthography (de-CH, de-CH-*)
Hyphenation dictionary for German, Traditional Orthography of 1901 (de-1901, de-AT-1901, de-DE-1901)
Hyphenation dictionary for Gujarati (gu, gu-*)
Hyphenation dictionary for Hindi (hi, hi-*)
Hyphenation dictionary for Hungarian (hu, hu-*)
Hyphenation dictionary for Icelandic (is, is-*)
Hyphenation dictionary for Interlingua (ia, ia-*)
Hyphenation dictionary for Irish (ga, ga-*)
Hyphenation dictionary for Italian (it, it-*)
Hyphenation dictionary for Kannada (kn, kn-*)
Hyphenation dictionary for Kurmanji (kmr, kmr-*)
Hyphenation dictionary for Latin (la, la-*)
Hyphenation dictionary for Latvian (lv, lv-*)
Hyphenation dictionary for Lithuanian (lt, lt-*)
Hyphenation dictionary for Malayalam (ml, ml-*)
Hyphenation dictionary for Marathi (mr, mr-*)
Hyphenation dictionary for Modern Greek (el, el-*)
Hyphenation dictionary for Mongolian (mn, mn-*)
Hyphenation dictionary for Norwegian (Nynorsk) (nn, nn-*)
Hyphenation dictionary for Norwegian (Bokmål) (no, no-*, nb, nb-*)
Hyphenation dictionary for Old Slavonic (cu, cu-*)
Hyphenation dictionary for Oriya (or, or-*)
Hyphenation dictionary for Polish (pl, pl-*)
Hyphenation dictionary for Portuguese (pt, pt-*)
Hyphenation dictionary for Punjabi/Panjabi (pa, pa-*)
Hyphenation dictionary for Russian (ru, ru-*)
Hyphenation dictionary for Slovak (sk, sk-*)
Hyphenation dictionary for Slovenian (sl, sl-*)
Hyphenation dictionary for Spanish (es, es-*)
Hyphenation dictionary for Swedish (sv, sv-*)
Hyphenation dictionary for Tamil (ta, ta-*)
Hyphenation dictionary for Telugu (te, te-*)
Hyphenation dictionary for Turkish (tr, tr-*)
Hyphenation dictionary for Turkmen (tk, tk-*)
Hyphenation dictionary for Ukrainian (uk, uk-*)
Hyphenation dictionary for Upper Sorbian (hsb, hsb-*)
Hyphenation dictionary for Welsh (cy, cy-*)

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
No support
No support
See implementation notes.
Requires a vendor prefix or different name for use.
Has more compatibility info.

Ver también