ellipsis - 文本溢出问题 : ellipsis

Question

我的文本溢出有问题:省略号 - 它不想与我的网站一起使用。我目前正在学习并且我有这个元素，其中我有带有固定高度文本的 div。我试过 text-overflow: ellipsis 但我似乎无法让它工作。现在我的代码如下:

<section class="comments">
    <p>
        Here is a short comment. 
    </p>

我的 CSS 是:

.comments p {
    height: 40px;
    text-align: justify;
    text-overflow: ellipsis-word;
    line-height: 20px;
    word-wrap: break-word;
    overflow: hidden;
}

它应该可以工作，但实际上没有。我尝试用 Firefox、Chrome、Opera 和 IE9 打开它，但它们都不起作用。我试图在 <p> 中添加样式包含文本，但它没有帮助。我试图改变 <p>至 <div> , 然后尝试将样式添加到 <div>但它没有用。我尝试使用 text-overflow: ellipsis only - 它没有用。我尝试使用 text-overflow: clip - 它没有用。显然我在某个地方犯了错误，但我想这对我来说太明显了。帮助!

Answer 1

http://www.quirksmode.org/css/contents.html说，“只有当盒子有 white-space: nowrap 和 overflow 而不是 visible 时，这个属性才有意义。”

请注意 text-overflow 不在 CSS3 spec 中.

另外，ellipsis-word 似乎没有实现。这种风格适合我(Win/Firefox 和 Chrome):

.comments p {
    height: 60px;
    text-align: justify;
    text-overflow: ellipsis;
    line-height: 20px;
    word-wrap: break-word;
    white-space: nowrap;
    overflow: hidden;
    border: 1px solid #000000;
}