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

CssWord Wrap

Css Problem Overview


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

Css Solutions


Solution 1 - Css

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  

Solution 2 - Css

CSS:

span
{
    white-space:nowrap
}

Solution 3 - Css

If you're okay to make the spans an inline-block, you may want to try this:

display: inline-block;
width: max-content;

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionShamoonView Question on Stackoverflow
Solution 1 - CsszzzzBovView Answer on Stackoverflow
Solution 2 - CssAlexCView Answer on Stackoverflow
Solution 3 - CssStefanView Answer on Stackoverflow