---
title: hyphens
slug: Web/CSS/hyphens
translation_of: Web/CSS/hyphens
---
<div>{{CSSRef}}</div>

<div>La propiedad <a href="/es/docs/Web/CSS">CSS</a> <strong><code>hyphens</code></strong> 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.</div>

<div></div>

<div>{{EmbedInteractiveExample("pages/css/hyphens.html")}}</div>



<p>Las reglas de separación silábica son específicas del idioma. En HTML, el idioma es determinado por el atributo <code><a href="/en-US/docs/Web/HTML/Global_attributes/lang">lang</a></code> 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 <code><a href="/en-US/docs/Web/SVG/Attribute/xml:lang">xml:lang</a>.</code></p>

<div class="note">
<p><strong>Nota:</strong> 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.</p>
</div>

<h2 id="Sintaxis">Sintaxis</h2>

<pre class="brush:css no-line-numbers">/* Keyword values */
hyphens: none;
hyphens: manual;
hyphens: auto;

/* Global values */
hyphens: inherit;
hyphens: initial;
hyphens: unset;
</pre>

<p>La propiedad <code>hyphens</code> se especifica con una única palabra de la lista a continuación.</p>

<h3 id="Valores">Valores</h3>

<dl>
 <dt><code>none</code></dt>
 <dd>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.</dd>
 <dt><code>manual</code></dt>
 <dd>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 {{anch("Sugiriendo oportunidades de separación de línea")}} más abajo para detalle.</dd>
 <dt><code>auto</code></dt>
 <dd>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 {{anch("Sugiriendo oportunidades de separación de línea")}} más abajo) anularán la separación automática cuando exista.</dd>
</dl>

<div class="note">
<p><strong>Nota:</strong> El comportamiento del valor <code>auto</code> 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 <code>lang</code> de HTML de cara a garantizar que la separación silábica automática se aplique en ese idioma.</p>
</div>

<h3 id="Sintaxis_formal">Sintaxis formal</h3>

{{csssyntax}}

<h2 id="Sugiriendo_oportunidades_de_separación_de_línea">Sugiriendo oportunidades de separación de línea</h2>

<p>Hay dos caracteres Unicode que pueden ser usados manualmente para especificar un potencial punto de separación de línea dentro del texto:</p>

<dl>
 <dt>U+2010 (HYPHEN)</dt>
 <dd>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.</dd>
 <dt>U+00AD (SHY)</dt>
 <dd>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 <code>&amp;shy;</code> para insertar una separación "suave".</dd>
</dl>

<h2 id="Ejemplo">Ejemplo</h2>

<p>Este ejemplo usa tres clases, una por cada posible configuración de la propiedad <code>hyphens</code>.</p>

<h3 id="HTML">HTML</h3>

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

<h3 id="CSS">CSS</h3>

<pre class="brush: 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;
}
</pre>

<h3 id="Resultado">Resultado</h3>

<figure>
<p>{{EmbedLiveSample("Example", "100%", 490)}}</p>
</figure>

<h2 id="Especificaciones">Especificaciones</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Especificación</th>
   <th scope="col">Estado</th>
   <th scope="col">Comentario</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName("CSS3 Text", "#hyphens-property", "hyphens")}}</td>
   <td>{{Spec2("CSS3 Text")}}</td>
   <td>Initial definition</td>
  </tr>
 </tbody>
</table>

<p>{{cssinfo}}</p>

<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>

<div>


<p>{{Compat("css.properties.hyphens")}}</p>
</div>

<h2 id="Ver_también">Ver también</h2>

<ul>
 <li>{{Cssxref("content")}}</li>
</ul>