多行元素的文本省略号

Daotin 于 2021-07-30 发布 编辑
  1. 单行文本
  2. 多行文本

单行文本

单行文本显示省略号比较简单，就三行代码。

p {
    width: 300px;
    overflow: hidden;
    /*文本不会换行*/
    white-space: nowrap;
    /*当文本溢出包含元素时，以省略号表示超出的文本*/
    text-overflow: ellipsis;
}

兼容性：好

多行文本

多行文本就复杂些。

方法一：使用webkit的css扩展属性

该方法适用于Safari、chrome和大多数移动端浏览器。

  1. display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。
  2. -webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。
  3. -webkit-line-clamp用来限制在一个块元素显示的文本的行数。 为了实现该效果，它需要组合其他的WebKit属性。常见结合属性：
p {
    width: 300px;
    overflow: hidden;
    /*将对象作为弹性伸缩盒子模型显示*/
    display: -webkit-box;
    /*设置子元素排列方式*/
    -webkit-box-orient: vertical;
    /*设置显示的行数，多出的部分会显示为...*/
    -webkit-line-clamp: 3;
}

兼容性：IE不兼容

方法二：使用js截断处理

使用js针对IE浏览器进行字符串截断处理。首先判断两行最多显示的字符个数

// name为待截断的原字符串
nameText(name){
    // 不是ie浏览器 直接返回 name
    if(!(!!window.ActiveXObject || "ActiveXObject" in window)){
        return name
    }
    // 超出2行显示省略号( 应为ie不支持相关css ,所以只能js实现 )
    let SETNUMBER = 50; // 两行最多显示的字符个数
    
    let length = name.replace(/[\u0391-\uFFE5]/g,"xx").length; // 汉字算2个字符进行转换
    
    if(length>SETNUMBER){
        let newStr = '';
        let count = 0;
        let charPos = 0;
        while(count < SETNUMBER){
            if(name.charAt(charPos).match(/[\u0391-\uFFE5]/)){
                count = count + 2;
            }else{
                count++;
            }
            newStr += name.charAt(charPos);
            charPos++;
        }
        return newStr + "..."
    }else{
        return name;
    }
}

方法三：使用伪元素实现，将伪元素放在最后一个字的上方，达到显示省略号的目的。

兼容性：较好

缺点：文字未超出的情况下也会出现省略号。

div {
    position: relative;
    line-height: 1.2em;
    max-height: 3.6em;
    width: 300px;
    /*设置文本为两端对齐*/
    text-align: justify;
    overflow: hidden;
  }
  
div::after {
    content: "...";
    position: absolute;
    bottom: 0;
    right: 0;
    /*将省略号的大小设置为1个字体大小*/
    width: 1em;
    /*设置背景，将最后一个字覆盖掉*/
    background: #fff;
  }

方法四：使用插件

（完）