How can I force a `span` to not wrap at the end of a line?

Shamoon picture Shamoon · Aug 10, 2011 · Viewed 65.3k times · Source

If it's a really long line of text, I want it to extend without wrapping

Answer

zzzzBov picture zzzzBov · Aug 10, 2011

Try

span
{
  white-space: pre;
}

or any other value that fits from the w3c spec:

normal
This value directs user agents to collapse sequences of white space, and break lines as necessary to fill line boxes.

pre
This value prevents user agents from collapsing sequences of white space. Lines are only broken at preserved newline characters.

nowrap
This value collapses white space as for 'normal', but suppresses line breaks within text.

pre-wrap
This value prevents user agents from collapsing sequences of white space. Lines are broken at preserved newline characters, and as necessary to fill line boxes.

pre-line
This value directs user agents to collapse sequences of white space. Lines are broken at preserved newline characters, and as necessary to fill line boxes.

You should also be aware that there is limited IE support for some of the listed options.

WARNING, Cross-browser content messiness: You could replace all spaces in the line with