How to stop text from taking up more than 1 line?

html css text word-wrap
Franky picture Franky · Feb 21, 2009 · Viewed 252k times · Source

Is there a word-wrap or any other attribute that stops text from wrapping? I have a height, and overflow:hidden, and the text still breaks.

Needs to work in all browsers, before CSS3.

Answer

cletus picture cletus · Feb 21, 2009 

div {
  white-space: nowrap;
  overflow: hidden;
}
<div>test that doesn't wrap</div>

Note: this only works on block elements. If you need to do this to table cells (for example) you need to put a div inside the table cell as table cells have display table-cell not block.

As of CSS3, this is supported for table cells as well.

Related questions

Input Field, wrap text instead of extending horizontally

I have an input field, a user will write text inside but when the text is to long it just extends horizontally instead of dropping down vertically. I tried: overflow: hidden; word-wrap: break-word; and I had no luck. Any other …

Read More
Wrapping long email addresses in small boxes

I have a box with a width of 118px which contains an email address. I use word-wrap: break-word; to wrap the addresses better. But on a special kind of addresses this makes it worse. big.ass.email@addre ss- is.…

Read More
HTML: Changing colors of specific words in a string of text

I have the below message (slightly changed): "Enter the competition by January 30, 2011 and you could win up to $$$$ — including amazing summer trips!" I currently have: <p style="font-size:14px; color:#538b01; font-weight:bold; font-style:italic;"> formatting the text …

Read More