CSS: how to stop text from taking up more than 1 l

Question

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 1

You can use CSS white-space Property to achieve this.

white-space: nowrap

Answer 2

Sometimes using   instead of spaces will work. Clearly it has drawbacks, though.

Answer 3

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.

Answer 4

Using ellipsis will add the ... at the last.

   <style type="text/css">
    div {
      white-space: nowrap;
      overflow: hidden;
text-overflow: ellipsis;
    }
    </style>