Question

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?

Answer 1

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.