Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How can I make an inline span tag to go to the next line without having to change its display to block?

Tags:

html

css

How can I make an inline span tag to go to the next line without having to change its display to block?

I want to preserve its inline behaviours because the span tag is meant to contain a short message. However, because it is inline, its position continues from its previous element (beside its previous element). I need the span to position to the next line, that's, below its previous element rather than side by side.

Is it possible to do this without changing its display to block?

like image 217
Carven Avatar asked Dec 06 '25 07:12

Carven


1 Answers

Use this:

span:before{
 content: '\a' ; 
 white-space: pre;  
}

The \a is from: http://www.w3.org/TR/CSS2/syndata.html#strings :

A string cannot directly contain a newline. To include a newline in a string, use an escape representing the line feed character in ISO-10646 (U+000A), such as "\A" or "\00000a". This character represents the generic notion of "newline" in CSS.

like image 122
Robert Niestroj Avatar answered Dec 09 '25 03:12

Robert Niestroj



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!