如何实现溢出文本省略号

背景

有时候为了页面美观，对于比较长的标题或简介内容，会希望溢出的内容用省略号代替。这么做虽然降低了用户体验，但是视觉上会比较整洁。

方案

单行文本溢出省略

  <p class="txt">这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介</p>

  <style>
   .txt {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  </style>

多行文本溢出省略

  <p class="txt2">这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介</p>

<style>
  .txt2 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; /* 设置溢出行数 */
  }
</style>

如果在项目中使用了scss，可以编写一个mixin来处理

 @mixin ellipsis($line: 1) {
    overflow: hidden;
    text-overflow: ellipsis;

    @if $line==1 {
        white-space: nowrap;
        word-wrap: normal;
    }

    @else {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: $line;
    }
}

注意： 这是一个非标准属性，但是得到了各大浏览器的支持（除了IE）

参考文档1：https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-line-clamp

如何实现溢出文本省略号首发于聚享小站，如果对您有帮助，不要忘记点赞支持一下呦🎉