css溢出 - 只有1行文本

Question

我的div具有以下css样式：

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

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

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

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

我该怎么做？

Answer 1

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

Answer 2

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

text-overflow: ellipsis;

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

此外，请务必结帐this thread以在Firefox中处理此问题。

Answer 3

您可以使用此css代码：

text-overflow: ellipsis; 
overflow: hidden; 
white-space: nowrap;

CSS中的 text-overflow 属性处理文本在溢出元素框时被剪裁的情况。它可以剪切（即剪切，隐藏），显示省略号（'...'，Unicode范围值U + 2026）。

请注意，仅当容器的overflow属性值隐藏，滚动或自动时才会出现文本溢出 >和 white-space：nowrap; 。

文本溢出只能发生在块或内嵌块级别元素上，因为元素需要有一个宽度才能溢出。溢出发生在direction属性或相关属性确定的方向上。

Answer 4

UX和UI的最佳代码是

white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
display: inherit;

Answer 5

我可以使用webkit-line-clamp和以下CSS实现此目的：

div {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

Answer 6

如果需要，请加上，如果您的文本较长，则可以使用以下CSS代码；

text-overflow: ellipsis;
overflow: visible;
white-space: nowrap;

使整行文本可见。

Answer 7

width:200px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;

还定义宽度以将溢出设置为一行

Answer 8

我有同样的问题，我用以下方法解决了这个问题：

display: inline-block;

在有问题的div上。