Propiedad CSS hyphens
La propiedad hyphens define cómo deben guionarse las palabras cuando el texto se ajusta en varias líneas.
La propiedad hyphens puede tomar tres valores: none, manual, auto. Permite evitar la guionización, permitir la guionización automática, o permitir la guionización solo cuando están presentes ciertos caracteres.
INFO
Las reglas de guionización no están definidas explícitamente en la especificación, por lo que varían de un navegador a otro.
| Valor inicial | none |
|---|---|
| Se aplica a | Todos los elementos. |
| Heredable | Sí. |
| Animable | No. |
| Versión | CSS3 |
| Sintaxis DOM | Object.style.hyphens = "none"; |
Sintaxis
Sintaxis de la propiedad CSS hyphens
hyphens: none | manual | auto | initial | inherit;Ejemplo de la propiedad hyphens:
Ejemplo de la propiedad CSS hyphens con los valores none, manual y auto
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
width: 55px;
border: 1px solid #666;
}
p.none {
hyphens: none;
}
p.manual {
hyphens: manual;
}
p.auto {
hyphens: auto;
}
</style>
</head>
<body>
<h2>Hyphens property example</h2>
<h3>none</h3>
<p class="none">An extreme­ly lengthy sentence</p>
<h3>manual</h3>
<p class="manual">An extreme­ly lengthy sentence</p>
<h3>auto</h3>
<p class="auto" lang="en">An extreme­ly lengthy sentence</p>
</body>
</html>Resultado
En el ejemplo proporcionado se incluyen los tres valores para poder observar las diferencias.
INFO
Los prefijos de navegador ya no son necesarios para los navegadores modernos.
Oportunidades de salto de línea
Con la ayuda de los dos caracteres Unicode siguientes, podemos definir manualmente los puntos potenciales de salto de línea dentro del texto:
U+00AD (SHY/Guion suave)
Este carácter se muestra de forma invisible. Indica un lugar donde el navegador debe romper la palabra en caso de que necesitemos guionización. Para insertar un SHY, utiliza .
U+2010 (HYPHEN/Guion duro)
Este carácter indica una posibilidad de salto de línea visible. El guion se muestra incluso en el caso de que la línea no se rompa en ese punto.
Valores
| Valor | Descripción |
|---|---|
| none | Sin guionización. Las palabras no se rompen en los saltos de línea, incluso si los caracteres sugieren puntos de ruptura. |
| manual | Las palabras se rompen solo para el ajuste de línea donde existen oportunidades de salto dentro de la palabra. Las palabras solo se guionizan en ‐ o ­. |
| auto | El navegador rompe automáticamente las palabras en los puntos de guionización adecuados. Las palabras se guionizan donde el algoritmo lo decide. El comportamiento del valor auto depende del idioma. |
| initial | Hace que la propiedad utilice su valor predeterminado. |
| inherit | Hereda la propiedad de su elemento padre. |
Práctica
¿Cuál es el propósito de la propiedad 'hyphens' en CSS?