How to force my text to not break into lines in css?

Question

I have a div inside another fixed width div. I want inner div can grow horizontally until in can contain all of it's elements or texts in one line. doesn't matter to create a horizontal scroll bar. what should I do? this is my sample code:

<div style="width:400px;border:solid 1px red;">
    TEST TEXT
    <div style="border:solid 3px green;position:absolute;z-index:99;text-overflow:">
        TEST INSIDE TEST INSIDE TEST INSIDE TEST INSIDE TEST INSIDE
        TEST INSIDE TEST INSIDE TEST INSIDE TEST INSIDE TEST INSIDE
    </div>
</div>

Answer 1

Use white-space: nowrap; for text to not break on white-spaces

Answer 2

I will add the options in css of text-overflow: ellipsis; with overflow: hidden; and white-space: nowrap;

if you use it this way:

h1{
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

You will get nice trim to overflow text.

LIVE EXAMPLE

protip about triminng for text

Answer 3

Is this what your trying to point out? Try to see the JSfiddle code http://jsfiddle.net/uYKKy/1/