CSS:如何阻止文本占用超过1行？

Question

是否有自动换行或任何其他属性来阻止文本换行？我有一个高度,并且overflow:hidden,文本仍然打破.

需要在CSS3之前在所有浏览器中工作.

Answer 1

div {
  white-space: nowrap;
  overflow: hidden;
}

<div>test that doesn't wrap</div>

注意:这仅适用于块元素.如果您需要对表格单元格执行此操作(例如),则需要在表格单元格中放置一个div,因为表格单元格具有显示表格单元格而不是块.

从CSS3开始,这也支持表格单元格.

Answer 2

你可以用它CSS white-space Property来实现这一目标.

white-space: nowrap

Answer 3

使用省略号将在最后添加....

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

Answer 4

明确地说，这非常适合段落、标题等。您只需指定display: block.

例如：

h5 {
  display: block;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

<h5>
  This is a really long title, but it won't exceed the parent width.
</h5>

Answer 5

有时使用 代替空格会起作用。不过，显然它有缺点。