Salto de línea (como <br>) usando solamente css

¿Es posible en css puro, es decir sin agregar etiquetas html adicionales, hacer un salto de línea como <br>? Quiero que el salto de línea después del elemento <h4>, pero no antes:Salto de línea (como <br>) usando solamente css

HTML

<li> 
    Text, text, text, text, text. <h4>Sub header</h4> 
    Text, text, text, text, text. 
</li>

CSS

h4 { 
    display: inline; 
}

he encontrado muchas preguntas de este tipo, pero siempre con respuestas como "uso bloqueo de pantalla;", lo que no puedo hacer, cuando el <h4> debe permanecer en la misma línea.

Fuente

2012-06-07 Steeven

¿Por qué es este elemento una h4? ¿Por qué lo usas en un lugar como este? – toniedzwiedz

Por curiosidad, ¿cuál es el motivo por el que no quiere usar
? –

La razón: tengo un montón de elementos de lista. Y también me preguntaba si existe una solución elegante. Por lo general, no es agradable usar etiquetas br entre los elementos (y veo el encabezado como un elemento propio) – Steeven

111

Funciona así:

h4 { 
    display:inline; 
} 
h4:after { 
    content:"\a"; 
    white-space: pre; 
}

Ejemplo: http://jsfiddle.net/Bb2d7/

El truco proviene de aquí: https://stackoverflow.com/a/66000/509752 (para tener una explicación más detallada)

Fuente

2012-06-07 14:44:27 adriantoine

Agradable. ¿Qué hace el \ a hacer? – Steeven

'\ a' significa salto de línea, carácter U + 000A, y' espacio en blanco: pre' le dice a los navegadores que lo traten como un salto de línea en la representación. –

Bien, gracias @ JukkaK.Korpela. Entonces, ¿por qué no se representa como un salto de línea en primer lugar? Aunque esta solución es simple, aún anularía otros comandos de espacio en blanco. – Steeven

Trate

h4{ display:block;}

en su css

http://jsfiddle.net/ZrJP6/

Fuente

2012-06-07 14:30:24

más un uso juicioso de 'margin-bottom' debería llevarlo allí. –

Pero si lo entiendo bien, el h4 tiene que estar en la misma línea que el texto anterior. Con display: block, hay un salto de línea antes del h4. – adriantoine

¿Qué? 'margin-bottom' pondrá el h4 en la misma línea que el texto anterior? – Steeven

Puede utilizar ::after para crear un bloque -altura 0px después de la <h4>, que se mueve de manera efectiva cualquier cosa después de la <h4> a la línea siguiente :

h4 { 
 
    display: inline; 
 
} 
 
h4::after { 
 
    content: ""; 
 
    display: block; 
 
}

<ul> 
 
    <li> 
 
    Text, text, text, text, text. <h4>Sub header</h4> 
 
    Text, text, text, text, text. 
 
    </li> 
 
</ul>

Fuente

2012-06-07 14:35:43 0b10011

Salto de línea (como <br>) usando solamente css

Respuesta

Cuestiones relacionadas