¿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. Echemos un vistazo a un ejemplo para comprender mejor cómo funciona esta herramienta y cómo puede ayudarte en tus diseños.
Ejemplo de Hyphens CSS en CodePen
Este 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:
.hyphenation {
hyphens: auto | manual | none;
}
Valores:
auto: El navegador decide dónde dividir las palabras para evitar el desbordamiento del texto. Utiliza las reglas de separación de sílabas del idioma predeterminado del documento o del sistema operativo.manual: Las palabras no se dividirán automáticamente. Debes utilizar el carácter de guion (-) para indicar dónde se pueden dividir las palabras manualmente.none: Desactiva la división automática y manual de palabras. El texto puede desbordarse si no cabe en el contenedor.
Ejemplo:
Por ejemplo, para permitir la división automática de palabras, puedes usar:
.hyphenation {
hyphens: auto;
}
Esto permitirá que el navegador decida dónde dividir las palabras para evitar el desbordamiento del texto.
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.
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.
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.
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.
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.
¡Esperamos que este artículo te resulte útil y te ayude a sacar el máximo provecho de la propiedad hyphens en tus proyectos de diseño web! Si te ha gustado este contenido y deseas estar al tanto de más consejos y trucos sobre desarrollo web, ¡suscríbete a nuestro boletín para recibir contenido relacionado en tu correo electrónico! ¡Gracias por leernos!