CSS溢出 – 只有1行的文字

我有以下CSS风格的div ：

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

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

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

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

我怎样才能做到这一点？

Answer 1

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

Answer 2

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

 text-overflow: ellipsis; 

这应该是除了white-space: nowrap; 由Septnuitsbuild议。

此外，请确保你签出这个线程来处理这个在Firefox中。

Answer 3

你可以使用这个CSS代码：

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

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

请注意，只有当容器的overflow属性的值为hidden ， scroll或auto和white-space：nowrap时才会发生文本溢出 。 。

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

Answer 4

我有同样的问题，我解决了它的使用：

 display: inline-block; 

在问题的div 。

Answer 5

 line-height:335px; 

你可以试试这个…