文本溢出问题：省略号 [英] Issues with text-overflow: ellipsis

问题描述

我有一个文本溢出的问题：省略号 - 它不想与我的网站工作。我目前正在学习，我有这个项目，我有与固定高度的文本的div。我试着与文本溢出：省略号，但我似乎不能使它的工作。现在我的代码如下：

I have a problem with text-overflow: ellipsis - it doesn't want to work with my site. I am currently learning and I have this project in which I have div's with text with fixed height. I tried with text-overflow: ellipsis but I don't seem to be able to make it work. Now my code goes as follows:

<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> 但它没有工作。我试着与文本溢出：省略号 - 它没有工作。我试着与文本溢出：剪辑 - 它没有工作。显然，我在某个地方犯了一个错误，但我想它是太明显为我看到它。帮助！

It should work but it doesn't. I have tried to open it with Firefox, Chrome, Opera and IE9 and it works for none of them. I tried to put a style in the <p> that contains the text, but it didn't help. I tried to change the <p> to <div>, and then tried to put a style to the <div> but it didn't work. I tried with text-overflow: ellipsis only - it didn't work. I tried with text-overflow: clip - it didn't work. Obviously I am making a mistake somewhere but I guess it is too obvious for me to see it. Help!

推荐答案

http://www.quirksmode.org/css/contents.html 说，这个属性只有当一个框有 white-space：nowrap 和溢出除了可见。

http://www.quirksmode.org/css/contents.html says, "This property only makes sense when a box has white-space: nowrap and an overflow other than visible."

请注意， text-overflow 不在 CSS3 spec 。

此外，省略号词语似乎没有实现。此样式适用于我（Win / Firefox和Chrome）：

Also, ellipsis-word does not appear to be implemented. This style works for me (Win/Firefox and 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;
}

这篇关于文本溢出问题：省略号的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！