html - 在 css 中使用文本溢出

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。

当它的大小超过其容器的大小时，我想制作一个以 ... 结尾的文本。我从这个例子中学到了，但它对我不起作用。我创建了一个小提琴供您在这里尝试。

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

Answer 1

您需要将white-space&overflow样式放在 上<p>，而不是上<div>（实际上，您只需要将overflowin 移入，但最好将它们放在一个类中而不是分开，因为它们在这种情况下会一起出现）：

#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>

看到它在这里工作。

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;
}