CSS 2 Line Text Wrap Ellipsis

时间:2012-03-01 21:37:57

标签: html css textwrapping ellipsis

我正在尝试添加一个固定大小的div,它将文本换行并在溢出时显示省略号。

这可能吗?

这是我到目前为止所处的位置:

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

1 个答案:

答案 0 :(得分:3)

尽我所知,这是不可能的,不是:所有支持文本溢出:省略号需​​要white-space:nowrap(显然将其限制为单行,并且不符合您的第一个要求) 。

对于多行包装,然后是省略号,我认为你将会遇到一个javascript解决方案(例如jTruncate)。