文本溢出问题：省略号答案

【问题标题】：Issues with text-overflow: ellipsis文本溢出问题：省略号
【发布时间】：2012-07-23 19:51:48
【问题描述】：

我遇到了文本溢出问题：省略号 - 它不想与我的网站一起使用。我目前正在学习，并且我有这个项目，其中我有带有固定高度文本的 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 - 它不起作用。显然我在某个地方犯了一个错误，但我想这对我来说太明显了。救命！

【问题讨论】：

标签： ellipsis css

【解决方案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;
}

【讨论】：