Menu
If it's a really long line of text, I want it to extend without wrapping
899
If you want to prevent the text from wrapping, you can apply white-space: nowrap; Notice in HTML code example at the top of this article, there are actually two line breaks, one before the line of text and one after, which allow the text to be on its own line (in the code).
You can use the CSS property word-wrap:break-word; , which will break words if they are too long for your span width.
You can insert line breaks via pseudo element But… the <span> is an inline element. The line break won't do anything! Just like a real line break won't do anything. We can force that line break to work by making white space meaningful…
Use "overflow: hidden" to avoid floating elements from wrapping a container's text. Unfortunately, any content of the content 's text will wrap underneath it: 
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
108
CSS:
span { white-space:nowrap } If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
