CSS - CSS实现关于文本省略与多行文本省略

---

---

主要参考

• text-overflow - CSS: Cascading Style Sheets | MDN
• overflow - CSS: Cascading Style Sheets | MDN
• white-space - CSS: Cascading Style Sheets | MDN
• line-clamp | CSS-Tricks

---

单行文本省略的CSS实现

#SINGLE_LINE_ELLIPSIS {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

• text-overflow: ellipsis

  text-overflow属性确定如何向用户展示内容因溢出而被剪切的信号。此处ellipsis值表示使用“...”表示内容溢出。

  但此属性生效有以下两个前提条件：

  • 块级元素内的内容因发生溢出而被剪切；
  • 内容溢出方向需与块级元素内联方向一致

• overflow: hidden

  overflow属性确定当发生溢出时，是否对内容进行剪切。通过设置值为hidden强制溢出的内容被剪切而不显示，进而满足text-overflow: ellipsis生效的第一个前提

• white-space: nowrap

  white-space属性用来设置对文本内容中的空白（值空白）及换行表现的处理方式。

  • 如不设置white-space（默认值normal），当内容在横向（块元素内联方向）发生溢出时，会自动换行展示，实际最终发生的溢出是在纵轴方向，如下图（overflow也未设置，以展示纵轴溢出内容）：

    

  • 设置white-space值为nowrap，即强制文本内换行符无效，当内容超出块状元素时，必然发生的是横向（块状元素内联方向）溢出，进而满足text-overflow: ellipsis生效的第二个前提

多行文本省略的CSS实现

• -webkit-line-clamp

  CSS3中的非标准属性，浏览器支持限制

  • 语法：

    .module {
        -webkit-line-clamp: [none | <integer>];
    }

  • 使用方式：

    #MULTI_LINE_ELLIPSIS {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
    }

    

  • 浏览器支持（2018.04.30）

    

多行文本省略的JavaScript实现

• Clamp.js

  // 单行文本省略
  $clamp(document.getElementById("CLAMP_SINGLE_LINE_ELLIPSIS"), {clamp: 1});
  // 多行文本省略
  $clamp(document.getElementById("CLAMP_MULTI_LINE_ELLIPSIS"), {clamp: 3});
  // 根据高度自动省略
  $clamp(document.getElementById("CLAMP_AUTO_LINE_ELLIPSIS"), {clamp: 'auto'});
  // 根据固定高度省略
  $clamp(document.getElementById("CLAMP_FIXED_LINE_ELLIPSIS"), {clamp: '12px'});

  

  由上可见，此种方式适配仍有限制，可根据实际需求选用。

---

转载于:https://www.cnblogs.com/JustBeZero/p/9527862.html