Prevent text breaks when overflowing

I do not want to specify the width of the area and set overflow:hiddenor scroll the text because the site is reacting. is there any way to prevent a line of text from being translated to the second line?

or example "lorem sum etc ger ergdfg efdfg"

will not

"lorem sum etc ger 
ergdfg  efdfg"

when is the width small?

+4
source share
2 answers

Using

white-space: nowrap;

for an element containing text.

The name is pretty clear - it makes spaces not wrapped.

Use overflow: hidden;if you do not want the text to exit the window in which it should have been.

Use text-overflow: ellipsis;if you want to use ellipsis when text overflows the bounding box.

Jsfiddle

screenshot

+10
source

white-space : nowrap.

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

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

All Articles