css溢出 - 只有1行文本

Question

我有div以下css样式:

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

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

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

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

我怎样才能做到这一点？

Answer 1

如果要将其限制为一行,请使用white-space: nowrap;div.

Answer 2

如果您想表明该div中还有更多可用内容,您可能希望显示"省略号":

text-overflow: ellipsis;

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

此外,请确保签出此线程以在Firefox中处理此问题.

Answer 3

你可以使用这个css代码:

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

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

请注意,仅当容器的overflow属性的值为hidden,scroll或auto和white-space:nowrap时才会发生文本溢出; .

文本溢出只能在块或内联块级元素上发生,因为元素需要具有宽度才能溢出.溢出发生在direction属性或相关属性确定的方向上.

Answer 4

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

定义宽度还可以在一行中设置溢出

Answer 5

我能够通过使用webkit-line-clamp以下 css 来实现此目的：

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

Answer 6

我通过使用解决了它：

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

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

.txt1{width:100px;}
.txt2{width:200px;}
.mytext{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

Answer 7

UX和UI的最佳代码是

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