Consejo de WordPress: encabezados con guiones y puntos de ruptura previstos

Separación de palabras en WordPress

Hoy tuve el caso en el sitio web de un cliente de que el tema no envolvía palabras largas en el título cuando el sitio web se veía en la vista móvil.

Dado que los encabezados están centrados, es posible que solo vea una palabra en el iPhone a la que le falte el anverso y el reverso. Por supuesto, ese era un estado que no podía dejar como estaba.

Se puede usar una etiqueta HTML simple para configurar los puntos de partición previstos en los encabezados.
Se puede usar una etiqueta HTML simple para configurar los puntos de partición previstos en los encabezados.

Separación de palabras en WordPress: las posibilidades

La investigación sobre las posibilidades de la separación silábica en WordPress y las páginas HTML en general sacó a la luz varias soluciones, que me gustaría presentarles aquí:

Separación de palabras CSS: guiones

Es difícil de creer, pero la división de guiones ya está prevista en CSS. La propiedad CSS "guiones" puede tener los valores "ninguno", "manual" o "automático".

body {
hyphens: auto;
}

En la práctica, es probable que el valor "auto" se utilice con mayor frecuencia, ya que en este caso el propio navegador separa las palabras.

Atención: para que funcione la separación silábica, el atributo HTML "lang" o "xml:lan" también debe configurarse en XML. De lo contrario, el navegador no sabe qué idioma usar para hacer su trabajo.

Hifas blandas:

Si envuelve la etiqueta en una palabra en un encabezado, la palabra se dividirá en ese punto si no queda suficiente ancho para mostrar la palabra por completo.

Ejemplo:

Nahrungsmittel­­unverträglichkeit

En el caso del guión suave, también se establece un guión al separar.

Salto de palabra:

tu construyes el dia en una palabra, esa palabra se dividirá en ese punto, si es necesario, pero no aparecerá ningún guión.

Ejemplo:

Nahrungsmittel<wbr>unverträglichkeit

Non Breaking Space: Prevenga la ruptura

Algunos pueden estar familiarizados con el término "espacio de ruptura". Este es un espacio que no debe usarse para la separación. En las páginas web, la etiqueta "No se rompe el espacio" hace lo siguiente: &nsbp;

Si se coloca entre dos palabras en lugar de un espacio normal, las palabras siempre se muestran en una línea.

Ejemplo:

Horst&nbsp;Evers

Espero haber podido mostrarles algunas novedades sobre la separación silábica en WordPress y HTML con esta pequeña excursión. En cualquier caso, todo era territorio nuevo para mí, excepto por el espacio sin rupturas, que ya conocía.

Mis consejos y trucos sobre tecnología y Apple

¿Te gustó el artículo y te ayudaron las instrucciones del blog? Entonces sería feliz si usted el blog a través de una membresía constante apoyaría.

Respuestas de 10 a "Consejo de WordPress: encabezados con separación de guiones y puntos de ruptura"

    1. ¡Gracias! Sus comentarios también son muy útiles, porque realmente no sabía si había algún interés en este "tema de nicho". :D Pero al parecer sí... ¡Estoy muy feliz!

  1. Cosa bonita…

    En este contexto, todavía estoy buscando una manera de evitar que un guión, es decir, "-" entre dos palabras, las separe.
    El trasfondo es que el nombre de nuestra empresa contiene un guión y siempre se ve mal cuando el nombre de la empresa está "roto". Hay algo parecido con los títulos relacionados, que me hubiera gustado presentar con guión pero no rotos...

    Tienes una idea...?
    vlf. olivier

Escribe un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados con * markiert

En el Blog de Sir Apfelot encontrarás consejos, instrucciones y reseñas sobre productos de Apple como el iPhone, iPad, Apple Watch, AirPods, iMac, Mac Pro, Mac Mini y Mac Studio.

Especiales