CSS 2行文本换行省略号

Question

CSS 2行文本换行省略号

5

我正在尝试添加一个固定大小的 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>

- ftsk33

是否有模拟CSS2中文本溢出省略号的方法？ - blobmaster

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Sheldon Griffin · Accepted Answer

据我所知，这是不可能的，无法使用text-overflow: ellipsis实现多行文本折行后显示省略号，因为它需要white-space: nowrap（显然将其限制为单行，并且无法满足您的第一个要求）。

如果要实现多行折行后显示省略号，则需要使用JavaScript解决方案（例如jTruncate）。