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

8次阅读

共计 911 个字符，预计需要花费 3 分钟才能阅读完成。

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

单行文本溢出省略

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