Menu
I do not want to specify the width of an area and set overflow:hidden or scroll to my text because the site is responsive. is there any way to prevent a line of text go to second line?
or example "lorem sum etc ger ergdfg efdfg"
will not become
"lorem sum etc ger
ergdfg efdfg"
when width is small?
250
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).
The overflow-wrap CSS property applies to inline elements, setting whether the browser should insert line breaks within an otherwise unbreakable string to prevent text from overflowing its line box.
The white-space property has numerous options, all of which define how to treat white space inside a given element. Here, you have set white-space to nowrap , which will prevent all line breaks.
To prevent the text from wrapping, you can use the CSS white-space property with the “nowrap” or “pre” value. In this snippet, you can see examples with both of them.
Use
white-space: nowrap;
on the element containing the text.
The name is pretty self-explanatory - it makes the whitespace not wrap.
Use overflow: hidden; if you don't want the text to go out of the box it's supposed to be in.
Use text-overflow: ellipsis; if you want ellipsis when the text overflows the bounding box.
JSFiddle
174
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
