[html] 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.

Everybody jumped on this one!!! I too made a fiddle:

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

RobAgar gets a point for pointing out white-space:nowrap first.

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.

in your css use white-space:nowrap;

add this to your div

white-space: nowrap;

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

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

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

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

I jumped here looking for the very same thing, but none 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>

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, inherit which do the things you expect them to do

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/

Use white-space:nowrap and overflow:hidden

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

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...