作为省略号的CSS文本溢出无法正常工作

我遇到了一个简单的问题text-overflow。我可以ellipsis我的文字，但文字不会完全填满div。作为省略号的CSS文本溢出无法正常工作

这里的演示中的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，但他们没有为我工作。

来源

2014-05-09 Linesofcode

在一个垂直的基础这是正常现象，文本溢出不工作，只在一条线上的水平内容 - 你需要一个JS解决方案 – SW4

谢谢，我已经搜索了一下，你是正确的。 – Linesofcode

将宽度添加到省略号工作的元素。它在内容超出容器宽度时起作用。没有指定容器的宽度，它将不起作用。

来源

2014-05-09 13:41:42

我已经将'width：300px;'添加到'div'和'p'，它似乎不起作用。 – Linesofcode

在你的jsfiddle中，我将宽度添加到p：first，并获得了所需的响应。尝试一样，希望它有帮助。 –

试试这个

的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 */ 
}

来源

2014-05-09 14:12:18 Manu

作为省略号的CSS文本溢出无法正常工作

回答

相关问题