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

Question

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

HTML:

Stack Overflow is the BEST !!!

CSS:

Answer 1

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

Answer 2

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;
}

Answer 3

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>

Answer 4

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

Answer 5

in your css use white-space:nowrap;

Answer 6

add this to your div

white-space: nowrap;

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