CSS文本溢出作为省略号没有按预期工作答案

【问题标题】：CSS text-overflow as ellipsis not working as expectedCSS文本溢出作为省略号没有按预期工作
【发布时间】：2014-06-27 06:41:54
【问题描述】：

text-overflow 有一个简单的问题。我可以ellipsis我的文字，但文字不会完全填满 div。

这是 jsfiddle 中的演示：Fiddle

我以为这段代码可以解决问题，但我错了。

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

我见过各种相关的主题，例如CSS text ellipsis when using variable width divs、Can't get "text-overflow: ellipsis;" to work，但没有一个对我有用。

【问题讨论】：

这是预期的行为，文本溢出不能在垂直的基础上工作，只能在一行水平的内容上工作 - 你需要一个 JS 解决方案
谢谢，我搜索了一下，你是对的。

标签： html css

【解决方案1】：

试试这个

Jsfiddle：http://jsfiddle.net/manublueheart/D4FKm/3/

诀窍是将 -webkit-box-orient: vertical; 添加到您的 css 中

p.first{
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 16px;     /* fallback */
    max-height: 32px;      /* fallback */
}

【讨论】：

【解决方案2】：

为元素添加宽度以使省略号起作用。它在内容超过容器宽度时起作用。如果不指定容器的宽度，它将无法工作。

【讨论】：

我已将width: 300px; 添加到div 和p，但它似乎不起作用。
在您的 jsfiddle 中，我将宽度添加到 p:first，并得到了所需的响应。试试同样的方法，希望对您有所帮助。