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

【问题标题】：Truncate text without the three dots in CSS在 CSS 中截断没有三个点的文本
【发布时间】：2022-09-24 18:48:12
【问题描述】：

我想在三行之后截断长文本，但没有三个点。

这是不起作用的代码：

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

谢谢！

标签： html css

【解决方案1】：

设置高度等于 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>

【讨论】：