Question

<div id="wrap">
    <p style="text-overflow:ellipsis;width:100%;"> Pope Benedict XVI becomes the first pontiff to resign in nearly 600 years, saying his health is deteriorating.</p>
</div>

这是html。

当它的大小超过其容器的大小时，我想制作以...结尾的文本。我从this示例中学到了，但它对我没有用。我为你创造了一个小提琴，试试here。

我想实际上有多行然后以...结尾，当文本超出大小时。那可能吗？无论如何我只遇到一条线路。

Answer 1

你需要放white-space＆amp; overflow上的<p>个样式，而不是<div>（实际上，您只需要移动overflow，但最好将它们保存在#wrap { width: 200px; background-color: red; } .ellipsis-overflow { text-overflow: ellipsis; width: 100%; white-space: nowrap; overflow: hidden; }中类而不是单独的，因为它们在这个上下文中一起）：

<div id="wrap">
    <p class="ellipsis-overflow"> Pope Benedict XVI becomes the first pontiff to resign in nearly 600 years, saying his health is deteriorating.</p>
</div>

{{1}}

见working here。

Answer 2

如果删除P标签，它将起作用，或者将样式放在P标签上。

http://jsfiddle.net/BTCeY/11/

<div id="wrap">
    Pope Benedict XVI becomes the first pontiff to resign in nearly 600 years, saying his health is deteriorating. Pope Benedict XVI becomes the first pontiff to resign in nearly 600 years, saying his health is deteriorating.
</div>

#wrap{
    width:200px;
    height: 200px;
    background-color:red;
    overflow:hidden;
    text-overflow: ellipsis;
    white-space:nowrap;
    padding: 20px;
}

在css中使用文本溢出

2 个答案: