css - 文本溢出 :ellipsis for the first line when line breaks

Question

我有一个带有 CSS 的 div:

div.c
{
font-size: 18px;
color: #888;
max-width: 300px;
display: inline-block;
overflow: hidden;
line-height: 20px;
text-overflow: ellipsis;
word-break: break-all;
}

这个div中的内容是“Abcdef abcdefabcdefabcdefabcdefaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa”//例如，仅在div中显示长度。

但是如果使用上面的 CSS，div 内容将被破坏并且没有三个点//as of text-overflow: ellipsis;。如果我删除 word-break: break-all; 那么将形成两行，第一个单词在第一行，第二个在第二行。但是 text-overflow: ellipsis; 适用于此。

我该怎么做才能将所有文本保持在一行中并使 text-overflow: ellpsis; 正常工作？

谢谢!

Answer 1

white-space: nowrap; 我相信这是你需要的。