css 溢出 - 只有 1 行文本

Question

我有 div 具有以下 CSS 样式：

 width:335px; float:left; overflow:hidden; padding-left:5px;

当我在 div 中插入一长行文本时，它会换行并显示所有文本。我想要的是只有一行不会换行的文本。当文本很长时，我希望这个溢出的文本消失。

我正在考虑设置高度，但似乎是错误的。

也许如果我添加与字体相同的高度，它应该可以工作并且不会在不同的浏览器中引起任何问题？

我怎样才能做到这一点？

原文由 homerun 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

如果要将其限制为一行，请在 div 上使用 white-space: nowrap; 。

原文由 Septnuits 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

如果您想表明该 div 中还有更多内容可用，您可能想要显示“省略号”：

 text-overflow: ellipsis;

这应该是 Septnuits 建议的 white-space: nowrap; 的补充。

此外，请确保您签出 此线程 以在 Firefox 中处理此问题。

原文由 Mouli 发布，翻译遵循 CC BY-SA 3.0 许可协议