如何阻止文本占用多于1行？

332

是否有自动换行或其他任何阻止文字换行的属性？我的身高是和overflow:hidden，文本仍然中断。

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

— 伊瑟伍德
source

631

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

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

展开摘要

注意：这仅适用于块元素。例如，如果需要对表格单元格执行此操作，则需要在表格单元格内放置一个div，因为表格单元格具有显示表格单元格而不阻塞。

从CSS3开始，表格单元格也支持此功能。

— 克莱图斯
source

12

空格！那就是我一直在寻找的... 1,000谢谢...这是不可能的Google！

2

还有一个专有的属性，即自动换行（IIRC）...愚蠢的IE。

— garrow

21

还要考虑“文本溢出：省略号；” 它添加了...在你的文字的末尾，如果去你的容器的宽度的范围之外

— 德鲁领地

1

我认为“这仅适用于块元素”注释是正确的。如果您在锚点，段落，标题等中尝试此操作，则此操作将无效。您需要做类似的事情p.oneline { white-space:nowrap; overflow:hidden; display:block;}

— Alex Angelico's

当心隐藏溢出；这意味着生意。

— David A. Gray

57

您可以使用它CSS white-space Property来实现。

white-space: nowrap

— 罗伯特·巴特
source

36

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

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

— 维维克
source

4

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

— 大胶体
source

不幸的是，在这种情况下我无法做到

2

只是为了清晰起见，它与段落和标题等配合使用就很好。您只需指定即可display: block。

例如：

<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>

（原谅内联样式）

— 邓肯·琼斯
source