文字裁剪结尾(常用)

css

.text-line {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  line-height: 2em;
  -webkit-box-orient: vertical;
  height: fit-content;
  /* fit-content盒子会使用可用的空间，但永远不会超过 */
}
.text-line-2 {
  -webkit-line-clamp: 2;
  line-clamp: 2;
}
.text-line-1 {
  -webkit-line-clamp: 1;
  line-clamp: 1;
}

html

<div style="display: flex; background: aliceblue">
  <div
    style="
          width: 64px;
          height: 64px;
          background-color: burlywood;
          flex: none;
        "
  ></div>
  <div class="text-line text-line-2">这是左侧固定，右边不固定裁剪 &nbsp</div>
</div>

这是左侧固定，右边不固定裁剪这是左侧固定，右边不固定裁剪

文字裁剪结尾(常用) ​

文字裁剪结尾(常用)