CSS实现单行、多行文本溢出显示省略号（…），且无兼容性问题

星繁~

已于 2022-03-06 16:41:16 修改

阅读量404

点赞数

分类专栏： # css 文章标签： html css 前端

于 2022-03-04 21:39:42 首次发布

本文链接：https://blog.csdn.net/m0_38010595/article/details/123285851

版权

该博客介绍了如何使用CSS实现单行和多行文本溢出时显示省略号，并在鼠标悬浮时显示全部内容。内容包括响应式截断的原理和实现，特别强调了无兼容性问题。

摘要由CSDN通过智能技术生成

支持文本溢出时，鼠标悬浮显示全部内容；

支持响应式截断；

单行文本溢出显示省略号，具体实现：

      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;

多行文本溢出时显示省略号，支持响应式截断，这里举例为超出2行时显示…，具体实现如下：

css样式如下：

     background: lightcyan;
      /*  需要设置一个给定的高度 */
      height: 60px;
      overflow: hidden;
      cursor: pointer

js代码如下：
通过判断当前元素的实际高度大于元素的可视区域的高度时截取后三个字显示为 … 并跳出循环

   //  超出多行显示省略号
    function renderTextMultiline() {
   
      var elem = document.getElementById('contentMultiline');
      var elemHeight = elem.clientHeight; // 元素可见部分的高度
      for (let i = 0; i < elemText.length; i++) {
   
        elem.innerHTML = elemText.substr(0, i);
        if (elem.scrollHeight > elemHeight) {
    // elem.scrollHeight 元素的高度，包括当前不可见的部分
          elem.innerHTML