How to prevent a div's content to start a new line

Question

I've a div with a width of 450px. What I want to do is, whenever the div's max width has achieved, it won't start a new line.

for instance, if I have this code:

<div style="width:450px">this is my content</div>

I want the output to be:

this is my content and if I will decide to make the div now 60px, the output will be:

this i which means the rest of the word has gotten cut and not a new line like this:

this
is my
content

Thanks in advance!

Answer 1

Use overflow: hidden and white-space: nowrap in your div style.

<div id="divId">this is my content</div>

And in css part

# divId {
    width:450px;
    overflow: hidden;
    white-space: nowrap;
}

Check out this Fiddle

Answer 2

Use word-wrap:break-word

<div id="divId">this is my content</div>

# divId {
width:450px;
word-wrap:break-word;
}