如何使内联span标记转到下一行而不必将其显示更改为块？

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.

Answer 2

You could throw the span into a block element, like a paragraph element. Or you could place an invisible horizontal rule between the span and the elements you want to be on the previous line. Or you could throw in a line break element.