截断CSS中没有三个点的文本



我想在三行之后截断一个长文本,但不包含三个点。

以下是不起作用的代码:

<html lang="en">
<style>
.truncateText{
height: auto;
width: 100px;
border: 1px solid red;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
<div class="truncateText">
This long text needs to be truncated without the three dots
</div>
</html>

谢谢!

设置等于3行文本的高度:

.truncateText {
--h: 1.2em; /* control the height */
line-height: var(--h); /* size of one line of text */
height: calc(3*var(--h));
width: 100px;
border: 1px solid red;
overflow: hidden;
}
<div class="truncateText">
This long text needs to be truncated without the three dots
</div>

相关内容

最新更新