CSS – Evitar salto de linea después de etiquetas h1, h2, h3…

Publicada el por

Veamos cómo evitar que al cerrar las etiquetas h1, h2, h3… de HTML5 se obligue al salto de linea. Empecemos con el artículo CSS – Evitar salto de linea después de etiquetas h1, h2, h3…

Veamos con un ejemplo cómo con unos estilos CSS podemos hacer que al final de las etiquetas h1, h2, h3… no se fuerce al salto de linea:

<div id="header">
<h1>Mi titulo</h1> El resto del titulo en la misma linea
</div>

En el código anterior, si no forzamos nada. Se imprimirá «Mi título» y posteriormente se fuerza un salto de linea, haciendo que el texto «El resto del título en la misma linea» salte a la siguiente linea. Queremos evitarlo. Queremos que todo quede en la misma línea.

Para que todo se muestre el la misma linea, deberemos utilizar los siguientes estilos:

#header h1 { display:inline; }

Es sencillo, a la etiqueta h1 le asignamos un estilo display:inline. A partir de aquí podíes jugar añadiendo nuevos estilos (tamaño de texto, color…)

A partir de aquí, podéis jugar con hacer tìtulos con textos de diferente estilo, y señalando con la etiqueta h1 el texto que los buscadores deben priorizar.

Evitar salto linea después de h1 h2 h3…

Veamos el ejemplo de los dos casos. El que aplicamos el display: inline a la etiqueta, y al que no se le aplica ningún estilo.

See the Pen H1, H2, H3 evitar salto by Trescomatres Multimèdia S.L. (@trescomatres) on CodePen.

Espero que os sea de utilidad el artículo.

Más información