La hyphenspropiedad controla la separación por sílabas del texto en elementos a nivel de bloque. Puede evitar que se produzca la separación de palabras, permitirla o permitirla solo cuando estén presentes determinados caracteres.
Tenga en cuenta que hyphenses sensible al idioma. Su capacidad para encontrar oportunidades de descanso depende del idioma, definido en el langatributo de un elemento principal. Todavía no se admiten todos los idiomas y la compatibilidad depende del navegador específico.
Sintaxis
p ( hyphens: none | manual | auto )guiones: ninguno
Las palabras nunca se separan con guiones en los saltos de línea, incluso si los caracteres dentro de la palabra sugieren dónde podría o debería ir la separación.
guiones: manual
Las palabras solo se dividen en los saltos de línea donde hay caracteres dentro de la palabra que sugieren oportunidades de salto de línea. Hay dos caracteres que sugieren una oportunidad de salto de línea:
U+2010(GUIÓN): el carácter de guión "duro" indica una oportunidad de salto de línea visible. Incluso si la línea no está realmente rota en ese punto, el guión aún se representa. Literalmente un "-".U+00AD(SHY): un guión invisible y "suave". Este carácter no se representa visiblemente; en cambio, sugiere un lugar donde el navegador podría optar por romper la palabra si es necesario. En HTML, puede utilizar-para insertar un guión suave.
guiones: auto
Las palabras se pueden dividir en los puntos apropiados de separación de sílabas, ya sea según lo determinado por los caracteres de separación de sílabas (ver más arriba) dentro de la palabra o según lo determinado automáticamente por un recurso de separación de palabras apropiado para el idioma (si el navegador lo admite o se proporciona a través de @hyphenation-resource).
Los caracteres de separación condicional dentro de una palabra, si están presentes, tienen prioridad sobre los recursos automáticos al determinar los puntos de separación dentro de la palabra.
guiones: todos
En desuso, no usar . Esto estaba solo en la especificación temporalmente para probar.
Manifestación
La siguiente demostración tiene un montón de párrafos y todo está configurado hyphens: auto;para demostrar el concepto de separación por guiones. El langatributo se establece en enen el elemento principal.
Soporte del navegador
Estos datos de soporte del navegador son de Caniuse, que tiene más detalles. Un número indica que el navegador admite la función en esa versión en adelante.
Escritorio
| Cromo | Firefox | ES DECIR | Borde | Safari |
|---|---|---|---|---|
| 88 | 6 * | 10 * | 12 * | 5,1 * |
Móvil / Tablet
| Android Chrome | Android Firefox | Androide | Safari de iOS |
|---|---|---|---|
| 88 | 85 | 81 | 4.2-4.3 * |
Safari 5+ requiere -webkit-, Firefox 6+ requiere -moz-, IE 10+ requiere -ms-, iOS 4.2+ requiere -webkit-.
Chrome <55 y el navegador Android son compatibles -webkit-hyphens: none, que es el valor predeterminado, pero ninguno de los otros valores.
En Firefox e Internet Explorer, la separación automática de palabras solo funciona para algunos idiomas (definidos con el langatributo). Consulte esta nota para obtener una lista completa de los idiomas admitidos.
Si está escribiendo un documento basado en web que realmente necesita separación de palabras, puede usar Hyphenator.js, que es una biblioteca basada en un vasto diccionario que inyectará automáticamente guiones suaves y espacios de ancho cero en su contenido.
Sin JavaScript, tendrá que depender de ambos hyphensy word-wrap:
.hyphenate ( word-wrap: break-word; overflow-wrap: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; )