How can I force div contents to stay in one line with HTML and CSS?

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.

Try this:

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

Use white-space:nowrap and overflow:hidden

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

In your CSS section, use white-space: nowrap;.

Your HTML code:

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

CSS:

div {
    width: 100px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

Now the result should be:

Stack Overf...

I made a fiddle:

http://jsfiddle.net/audetwebdesign/kh4aR/

RobAgar pointed out white-space:nowrap.

A couple of things here: You need overflow: hidden if you don't want to see the extra characters poking out into your layout.

Also, as mentioned, you could use white-space: pre (see EnderMB), keeping in mind that pre will not collapse white space whereas white-space: nowrap will.

div {
    display: flex;
    flex-direction: row;
}

was the solution that worked for me. In some cases with div-lists, this is needed.

Some alternative direction values are row-reverse, column, column-reverse, unset, initial, and inherit. Which do the things you expect them to do.

Add this to your div:

white-space: nowrap;

http://jsfiddle.net/NXchy/1/

Give this a try. It uses pre rather than nowrap as I would assume you would want this to run similarly to <pre>, but either will work just fine:

div {
    border: 1px solid black;
    max-width: 70px;
    white-space: pre;
}

http://jsfiddle.net/NXchy/11/

None of the previous answers worked for me.

There are instances where regardless what you do, and depending on the system (Oracle Designer: Oracle 11g - PL/SQL), divs will always go to the next line, in which case you should use the span tag instead.

This worked wonders for me.

<span float: left; white-space: nowrap; overflow: hidden; onmouseover="rollOverImageSectionFiveThreeOne(this)">
    <input type="radio" id="radio4" name="p_verify_type" value="SomeValue"  />
</span> 
Just Your Text || 
<span id="headerFiveThreeOneHelpText" float: left; white-space: nowrap; overflow: hidden;></span>

Try setting a height, so the block cannot grow to accommodate your text, and keep the overflow: hidden parameter.

Here is an example of what you might like if you need to display two lines high:

div {
    border: 1px solid black;
    width: 70px;
    height: 2.2em;
    overflow: hidden;
}