【问题标题】: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 打开它,但它们都不适用。我试图在包含文本的&lt;p&gt; 中添加一个样式,但没有帮助。我尝试将&lt;p&gt; 更改为&lt;div&gt;,然后尝试为&lt;div&gt; 设置样式,但没有成功。我尝试使用 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;
    }
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2016-01-31
      • 2018-07-22
      • 1970-01-01
      • 2012-01-18
      • 2015-01-14
      • 2013-04-01
      • 2017-01-21
      • 2019-04-29
      相关资源
      最近更新 更多