2

我对 text-overflow: ellipsis 有疑问 - 它不想与我的网站一起使用。我目前正在学习，并且我有这个项目，其中我有带有固定高度文本的 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 - 它不起作用。显然我在某个地方犯了一个错误，但我想这对我来说太明显了。帮助！

4

1 回答 1

3

http://www.quirksmode.org/css/contents.htmlwhite-space: nowrap说，“这个属性只有在一个盒子有并且overflow不是.时才有意义visible。”

请注意，这text-overflow不在CSS3 规范中。

此外，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;
}
于 2012-07-24T15:28:32.757 回答