HTML+CSS: How to force div contents to stay in one line?

I have a long text inside a div with defined width:

HTML:

<div>Stack Overflow is the BEST !!!</div>

CSS:

div {
    border: 1px solid black;
    width: 70px;
}

How could I force the string to stay in one line (i.e. to be cut in the middle of "Overflow") ?

I tried to use overflow: hidden, but it didn't help.


Solution 1:

Try this:

div {
    border: 1px solid black;
    width: 70px;
    overflow: hidden;
    white-space: nowrap;
}

Solution 2:

Use white-space:nowrap and overflow:hidden

http://jsfiddle.net/NXchy/8/

Solution 3:

in your css use white-space:nowrap;