Issues with text-overflow: ellipsis

问题

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>

And my CSS is:

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

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!

回答1:

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."

Note that text-overflow is not in the CSS3 spec.

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;
}

来源：https://stackoverflow.com/questions/11619489/issues-with-text-overflow-ellipsis

标签

ellipsis

css3