¿Te ha pasado que al diseñar una página web te encuentras con el problema de que las palabras no caben correctamente en las líneas de texto y necesitas usar el guion para dividirlas de forma automática? Este inconveniente puede hacer que tus diseños se vean desordenados y poco profesionales. Pero ¡no te preocupes! Existe una solución fácil de implementar con CSS: la propiedad hyphens CSS. En este artículo, veremos cómo esta propiedad te ayuda a separar las palabra con guiones al final de línea automáticamente.
1. Entendiendo Hyphens CSS: Solución para textos que se desbordan
Si no nos gusta cómo quedan nuestros textos porque desbordan los contenedores o quedan líneas de texto demasiado vacías, la solución está en dividir las palabras para que quepan en el espacio que queda, y para ello, utilizaremos hyphens de CSS. Esta propiedad nos permite controlar la división de palabras al final de una línea de texto, mejorando la legibilidad y estética del contenido.
La propiedad hyphens controla la separación de palabras del texto en elementos de bloque. Puede impedir la separación de palabras, permitirla o permitirla solo cuando contengan ciertos caracteres. 🔍
Tenga en cuenta que hyphenses sensible al idioma. Su capacidad para encontrar oportunidades de interrupción depende del idioma, definido en el langatributo de un elemento padre. Aún no todos los idiomas son compatibles, y la compatibilidad depende del navegador específico.
Echemos un vistazo a un ejemplo para comprender mejor cómo funciona esta herramienta y cómo puede ayudarte en tus diseños.
See the Pen Modelo Hyphens con CSS by Angel Paz (@angelpaz1960) on CodePen.
Ejemplo de Hyphens CSS en CodePenEste ejemplo muestra cómo la propiedad hyphens en CSS puede influir en la forma en que se muestran las palabras al final de una línea de texto:
- Texto sin hyphens: En este primer contenedor, el texto se presenta sin el uso de la propiedad hyphens. Esto significa que el navegador no tiene instrucciones específicas sobre cómo manejar la división de palabras al final de la línea. Como resultado, cuando el texto es demasiado largo para caber en una línea, se desborda el contenedor. Esto afecta a la legibilidad del texto y hace que el diseño general parezca desordenado.
- Texto con hyphens: En el segundo contenedor, se aplica la propiedad hyphens con el valor
auto. Esto le indica al navegador que determine automáticamente dónde dividir las palabras al final de la línea para evitar el desbordamiento del texto. Al especificarauto, el navegador utilizará las reglas de separación de sílabas del idioma predeterminado del documento para dividir las palabras de manera adecuada. Esto mejora la legibilidad del texto y ayuda a mantener un diseño limpio y ordenado.
2. Propiedad hyphens CSS: sintaxis y valores
La propiedad hyphens en CSS controla la división de palabras al final de una línea cuando el texto se desborda.
Sintaxis:
.element {
hyphens: auto | manual | none;
} Valores:
1 none:
Desactiva la división automática y manual de palabras, incluso si los caracteres dentro de la palabra sugieren dónde podría o debería ir la separación con guion. El texto puede desbordarse si no cabe en el contenedor.
2 auto:
Indicará al navegador que puede gestionar la separación de palabras automáticamente para evitar el desbordamiento del texto.
Solo la aplicará si las reglas de referencia de separación de palabras están definidas en el idioma predeterminado del documento o del sistema operativo. Para ello, debe especificar el atributo lang en la etiqueta html.
3 manual:
Las palabras no se dividirán automáticamente y solo se dividen en saltos de línea donde hay caracteres dentro de la palabra que sugieren oportunidades de salto de línea. Debes utilizar el carácter de guion (-) para indicar dónde se pueden dividir las palabras manualmente.
Hay dos caracteres que sugieren oportunidades de salto de línea:
U+2010(GUIÓN): El guion duro indica un salto de línea visible. Incluso si la línea no está cortada en ese punto, el guion se representa. Literalmente, un «-».
U+00AD(SHY): un guion invisible y suave. Este carácter no se representa de forma visible; en cambio, sugiere un lugar donde el navegador podría dividir la palabra si es necesario. En HTML, se puede usar (shy) para insertar un guion suave.
4 all:
Obsoleto, no usar. Esto solo se incluyó temporalmente en la especificación para pruebas.
Ejemplo:
Por ejemplo, para permitir la división automática de palabras, puedes usar:
.element{
hyphens: auto;
}
Esto permitirá que el navegador decida dónde dividir las palabras para evitar el desbordamiento del texto.
Cuanto más completas sean las reglas, más pertinente será la separación de palabras. Analogía: considere estas reglas como un diccionario de separación de palabras: cuanto más completas y completas sean, mejor será la separación.
3. Definir el idioma para una correcta separación de sílabas con hyphens CSS
Además de la sintaxis y los valores de la propiedad hyphens, es importante definir el idioma del contenido para que la división de palabras funcione correctamente. Esto se logra utilizando la propiedad lang en HTML para especificar el idioma del texto y proporcionar al navegador la información necesaria para aplicar las reglas de separación de sílabas adecuadas.
VER NOTA 🔍
Como sabemos, según la ortografía de la lengua española, se puede emplear el guion para dividir aquellas palabras situadas al final de una línea que, por falta de espacio, deben escribirse en parte en la siguiente línea. La división de estas palabras no se puede realizar en cualquier lugar porque existen unas reglas específicas para hacer correctamente las separaciones. Por ello, en CSS es necesario especificar el idioma del texto que se está formateando. Por ejemplo, podríamos hacer estas divisiones te-/léfono, telé-/fono o teléfo-/no, pero no estas tel/éfono, teléf/ono o teléfon/o.
Por ejemplo, si el texto está en español, debes incluir la siguiente declaración en el elemento <html>:
<html lang="es">
Esto indica que el contenido del documento está en español, lo que permite al navegador utilizar las reglas de separación de sílabas específicas del idioma español al dividir las palabras al final de una línea.
4. Fragmentos de texto en otro idioma al predefinido en la etiqueta html
Es importante destacar que si tienes fragmentos de código o texto en otro idioma dentro de tu documento HTML, puedes especificar el idioma correspondiente utilizando la etiqueta lang en esos elementos específicos. Por ejemplo, si tienes una cita o un fragmento de texto en inglés dentro de un documento en español, puedes agregar lang="en" al elemento que contiene ese texto en inglés.
<p lang="en">This is an example sentence in English within a paragraph.</p>
De esta manera, el navegador puede aplicar las reglas de separación de palabras adecuadas para ese idioma específico, asegurando una división de palabras correcta y coherente en todo el contenido del sitio web, independientemente del idioma en que esté escrito.
5. Ejemplos de uso
5.1. Usando hyphens en cards
El siguiente código crea una card con una imagen, un título (h3) y un párrafo (p). Ambos elementos de texto (h3 y p) tienen la propiedad hyphens establecida en auto, lo que permite que el navegador divida automáticamente las palabras al final de una línea si es necesario para evitar el desbordamiento del contenedor. Esto mejora la legibilidad del texto, especialmente en dispositivos con pantallas más pequeñas donde el espacio es limitado.
See the Pen Usando hyphens en cards by Angel Paz (@angelpaz1960) on CodePen.
5.2. Usando hyphens con line-clamp
La combinación de las propiedades hyphens y line-clamp puede ser especialmente útil para controlar la legibilidad del texto en diseños responsivos. Hyphens se encarga de dividir las palabras al final de una línea, mientras que line-clamp trunca el texto que excede un número específico de líneas y muestra puntos suspensivos al final del texto truncado. 🔍
En el siguiente ejemplo mostramos un extracto de texto en una card con un máximo de tres líneas, y conseguimos que las palabras se dividan automáticamente al final de una línea si es necesario.
See the Pen Ejemplo práctico usando hyphens con line-clamp by Angel Paz (@angelpaz1960) on CodePen.
6. Compatibilidad de hyphens CSS con los navegadores actuales
Según Can I Use , La propiedad CSS hyphens tiene una buena compatibilidad con los navegadores modernos, incluidos Chrome, Firefox, Safari, Edge y Opera. Sin embargo, es posible que algunos navegadores más antiguos no la admitan completamente. Es importante verificar la compatibilidad específica según las necesidades del proyecto y considerar soluciones alternativas para garantizar una experiencia consistente para todos los usuarios.
Los navegadores tenían diferentes niveles de soporte para esta propiedad en el momento actual de este artículo:
Internet Explorerlo soporta desde su versión 9 con el -msprefijo , y dispone de varios diccionarios de separación de palabras entre idiomas;- En
Firefoxla separación automática de palabras solo funciona en algunos idiomas (definidos con el atributolang) y con el prefijo-moz, por supuesto - Los navegadores basados en WebKit también admiten la propiedad
hyphens, con el prefijo-webkit.Por ejemplo,Safarila admite desde la versión 5.1 en su versión de escritorio y desde iOS 4.2 en su versión móvil.
Nota: Chrome no incluye diccionario de separación de palabras, por lo que no puede usar esta propiedad para separar palabras; en realidad solo admiten -webkit-hyphens: none, que es el valor predeterminado, pero ninguno de los otros valores. Puede usar la word-break: break-word; si desea que el navegador la realice. Advertencia: break-word es un valor propietario (no estándar). Lamentablemente, es el único que parece ofrecer buenos resultados con esta propiedad.
Actualización: La propiedad word-wrap también existe, permite dividir palabras demasiado largas (y funciona en Chrome), sin embargo no hay separación de palabras (la palabra se corta sin guion) y se hace de forma brutal (en cualquier parte de la palabra), por lo que debe usarse con mucho cuidado. 🔍
Si está escribiendo un documento basado en la web que realmente necesita separación de palabras, puede usar Hyphenator.js , que es una biblioteca basada en un amplio diccionario que inyectará automáticamente guiones suaves y espacios de ancho cero en su contenido.
Sin JavaScript, tendrás que confiar en ambos hyphens y word-wrap:
.element {
word-wrap: break-word;
overflow-wrap: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
-o-hyphens: auto;
hyphens: auto;
} Ahora que has aprendido sobre la propiedad hyphens en CSS y cómo puede ayudarte a mejorar la apariencia y legibilidad del texto te queda aplicar este conocimiento en tus proyectos. Recuerda siempre definir el idioma adecuado en tu documento HTML y utilizar la propiedad hyphens de manera estratégica para evitar desbordamientos y líneas de texto vacías.
Más información:
- hyphens (guiones) en la especificación
- hyphens en MDN
- Ajuste de palabras y separación de palabras mediante CSS por Kenneth Auchenberg
- El estado actual de la separación de palabras en la web por David Newton
