常规的解决多行省略号的方法是使用 display: -webkit-box,但这种方法在Safari浏览器下会导致每行文字右侧空隙过大,而且使用两端对齐文本会与省略号重叠。为了避免这些问题,通常需要使用伪元素模拟省略号,但这种方法需要计算高度以判断省略号的显示和隐藏。

另一种解决方法是使用 flexshape-outside 来模拟省略号。使用 flex 可以让文本块在垂直方向上自动分配空间,并将文本块的边缘与省略号的边缘对齐。然后,使用 shape-outside 属性将省略号的形状设置为一个矩形,它将在文本块的右侧创建一个空白区域,使省略号不会与文本重叠。

以下是使用 flex 和 shape-outside 实现省略号的示例代码:

<!DOCTYPE html>
<html>

<head>
  <style>
    .con {
      width: 310px;
      resize: horizontal;
      display: flex;
      position: relative;
      border: 10px solid transparent;
      outline: 2px dashed;
      overflow: hidden;
      text-align: justify;
    }

    .txt {
      line-height: 1.5;
      max-height: 4.5em;
      /*1.5 * 3*/
      overflow: hidden;
    }

    .txt {
      line-height: 1.5;
      overflow: hidden;
      max-height: 4.5em;
    }

    .txt::before {
      content: "...";
      float: right;
      /* background-color: red; */
      height: 100%;
      display: flex;
      align-items: flex-end;
      shape-outside: inset(calc(100% - 1.2em) 0 0 0);
      margin-left: 2px;
    }

    .txt::after {
      content: "";
      position: absolute;
      width: 999vh;
      height: 999vh;
      background: aliceblue;
      box-shadow: -2em 2em aliceblue;
      pointer-events: none;
    }
  </style>
</head>

<body>
  <div class="con">
    <div class="txt">
      Stable diffusion的门槛要被彻底终结了,一个人人都可以玩sd 的时代来了。
    </div>
  </div>
</body>

</html>

在上面的代码中,.con 元素使用 flex 布局,并将其最大高度设置为三行的高度。.txt 元素使用 flex 属性来自动分配垂直空间,并将省略号的右侧边缘与文本的右侧边缘对齐,shapes布局可以很轻易的实现任意形状的环绕效果,这里使用环绕效果保证了文本对齐效果,再用一个矩形遮挡省略号,绝对定位的元素不设置topleft会跟随文本内容,就实现了自动隐藏省略号的效果。