CODEWITHSUNDEEP
htmlcss
Carven
Carven

Reputation: 15648

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

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?

Upvotes: 3

Views: 7759

Answers (2)

Robert Niestroj
Robert Niestroj

Reputation: 16131

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.

Upvotes: 8

Ryan Lynch
Ryan Lynch

Reputation: 7776

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.

Upvotes: 1

Related Questions