文字裁剪结尾展示更多

你好我是前端工程师，这是一个测试用例,你好我是前端工程师，这是一个测试用例你好我是前端工程师，这是一个测试用例

css

.flex { display: flex }
.relative { position: relative; }
.overflow-hidden { overflow: hidden }
.block { display: block; }
.float-right { float: right; }
.clear-both { clear: both; }
.auto--hidden-text{
  --CutFontSize: 28px;
  --CutLineHeight: 40px;
  --CutLineClamp: 2;
  font-size: var(--CutFontSize);
  line-height: var(--CutLineHeight);
  word-break: break-all;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--CutLineClamp);
}
.auto--hidden-text::before {
    content: '';
    display: block;
    float: right;
    height: calc(100% - var(--CutLineHeight));
}

.auto--hidden-text::after {
    position: absolute;
    content: '';
    display: inline-block;
    width: 150%;
    height: 100%;
    background: #fff;
    margin-left: 0em;
}

html

<div class="relative overflow-hidden flex" style="    resize: horizontal;" >
        <div class="auto--hidden-text">
            <div style="margin-left: 1.5em;  color: crimson;" class="block clear-both float-right">更多</div>
            <span> 你好我是前端工程师，这是一个测试用例,你好我是前端工程师，这是一个测试用例你好我是前端工程师，这是一个测试用例</span><img style="width: 3em ;float: right;" />
        </div>
</div>

文字裁剪结尾展示更多 ​

文字裁剪结尾展示更多