CODEWITHSUNDEEP
css
user3033162
user3033162

Reputation: 135

prevent text to line break if overflow

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?

Upvotes: 8

Views: 6984

Answers (2)

Kishori
Kishori

Reputation: 1095

You can try using white-space : nowrap.

Example is available below

<span>lorem sum etc ger ergdfg efdfg</span>

<style>
span
{
    width:100px;
    height:auto;
    overflow:scroll;
    display:inline-block;
    white-space : nowrap;
}
</style>

Upvotes: 0

tckmn
tckmn

Reputation: 59273

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

screenshot

Upvotes: 19

Related Questions