CSS 2行文本换行省略号 [英] CSS 2 Line Text Wrap Ellipsis

问题描述

这是可能吗？

这里是我到目前为止的地方：

  .mydiv {font-family：Georgia，新罗马，Times，serif; font-size：14px; line-height：20px;显示：block; overflow：hidden; text-overflow：ellipsis; width：120px！important; height：40px！important; border：1px solid＃000000;}  

 < div class =mydiv> Lorem ipsum dolor sit amet，consectetur adipisicing elit，sed do eiusmod tempor incididunt ut labore et dolore magna aliqua。 Ut enim ad minim veniam，quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat。 Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur。 < / div>  
 

解决方案

尽我所能告诉，这是不可能的，没有：所有支持文本溢出：省略号需​​要white-space：nowrap这显然限制它为一条线，并不符合你的第一个要求）。

对于多行包装，省略号，我想你会被JavaScript解决方案所困扰（例如 jTruncate ）。

I'm trying to add a fixed size div that would text wrap and also show ellipsis on overflow.

Is this possible?

Here is where I'm at so far:

.mydiv {
        font-family: Georgia, "Times New Roman", Times, serif;
        font-size: 14px;
        line-height: 20px;
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        width: 120px !important;
        height: 40px !important;
        border: 1px solid #000000;
}

<div class="mydiv">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

解决方案

As best as I can tell, this is not possible, no: all support for text-overflow: ellipsis requires white-space: nowrap (which obviously constrains it to a single line, and doesn't fulfill your first requirement).

For multiline wrapping, then ellipsis, I think you're going to be stuck with a javascript solution (for example jTruncate ).

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