关于javascript:如何实现溢出文本省略号

背景

有时候为了页面好看，对于比拟长的题目或简介内容，会心愿溢出的内容用省略号代替。这么做尽管升高了用户体验，然而视觉上会比拟整洁。

计划

单行文本溢出省略

  <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…

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