css文字两行超出后显示‘...'

要截断两行后带有“...”的文本，可以使用 CSS -webkit-line-clamp属性和display: -webkit-box; -webkit-box-orient: vertical;。下面是一个示例：

<style>
  .text {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }
</style>

<div class="text">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque placerat, neque ut tempus efficitur, nibh purus sollicitudin justo, quis cursus erat nisi a lacus.
</div>

 

此代码将在两行后截断文本，并在末尾添加省略号。但是，请注意，此解决方案仅适用于 WebKit 浏览器（例如 Chrome 和 Safari），并且可能不适用于所有浏览器。要获得更广泛的浏览器支持，可以使用 max-height,line-height 和::after伪元素的组合。下面是一个示例：

<style>
  .text {
    position: relative;
    display: inline-block;
    word-wrap: break-word;
    overflow: hidden;
    max-height: 3.6em;
    line-height: 1.2em;
    text-align: justify;
  }
  .text::after {
    content: "...";
    position: absolute;
    right: -12px;
    bottom: 4px;
  }
</style>

<div class="text">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque placerat, neque ut tempus efficitur, nibh purus sollicitudin justo, quis cursus erat nisi a lacus.
</div>

 

此代码还将截断两行后的文本，并在末尾添加省略号。这是一个更广泛支持的解决方案，但可能需要根据文本的字体大小和行高调整max-height。