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

问题

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.

回答1:

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.

回答2:

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

white-space: nowrap

回答3:

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

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

回答4:

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

回答5:

Just to be crystal clear, this works nicely with paragraphs and headers etc. You just need to specify display: block.

For instance:

<h5 style="display: block; text-overflow: ellipsis; white-space: nowrap; overflow: hidden">
  This is a really long title, but it won't exceed the parent width
</h5>

(forgive the inline styles)

来源：https://stackoverflow.com/questions/572298/how-to-stop-text-from-taking-up-more-than-1-line