CODEWITHSUNDEEP
htmlcss
idlackage
idlackage

Reputation: 2863

How to allow text to spill outside div

For a simple example, this: the text is supposed to be in one line, but it's broken down into three because of how small the div is. How do I let the text spill out of the div without it wrapping?

Html:

<div style="width: 20px;">Some text here</div>

Result:

Some
text
here

I want this:

Some text here

Upvotes: 22

Views: 25169

Answers (2)

Mr Jones
Mr Jones

Reputation: 1198

When a div has the attribute white-space: no-wrap, its child elements inherit the same property. If you would like child elements to wrap, you can use white-space: normal;

jsFiddle

Of course this works, but if the amount of divs using normal out-weighs the amount of divs using nowrap, I would suggest isolating the nowrap text by placing it in its own div.

jsFiddle

Upvotes: 4

Jacobson
Jacobson

Reputation: 683

Try this:

<div style="width: 20px; white-space: nowrap;">Some text here</div>

Upvotes: 39

Related Questions