css实现文本溢出省略效果

封面.jpg

一、单行：

p {
    overflow: hidden;//超出隐藏
    text-overflow: ellipsis;//文本溢出，省略号代替
    //如果是单行
    white-space: nowrap;//设置文本内换行符无效，在同一行继续展示，除非遇到<br>
}

效果：

单行溢出省略.png

二、多行：

2.1 css

不考虑兼容（-webkit-box兼容性：/* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */）

p {
    overflow: hidden;//超出隐藏
    text-overflow: ellipsis;//文本溢出，省略号代替
    //如果是多行
    -webkit-line-clamp: 2;//限制显示的行数，必须结合以下2行：
    display: -webkit-box;//作为弹性伸缩盒子模型显示
    -webkit-box-orient: vertical;(垂直的)//设置或检索伸缩盒对象的子元素的排列方式为垂直展示
}

效果：

多行文本溢出省略1.png

考虑兼容

/** css **/
        div {
            width: 100px;
            border: 1px solid red;
            overflow: hidden;
            line-height: 1.2em;
            height: 4.8em;
            position: relative;
            text-align: justify;
        }
        div::after {
            content: "...";
            position: absolute;
            bottom: 0;
            right: 0;
            width: 1em;
            background-color: #fff;
        }

<!-- html -->
<div>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</div>

效果：

多行文本溢出省略2.png

2.2 使用插件

2.2.1 Clamp.js

下载地址
用法：

//Single line
$clamp(myHeader, {clamp: 1});

//Multi-line
$clamp(myHeader, {clamp: 3});

//Auto-clamp based on available height
$clamp(myParagraph, {clamp: 'auto'});

//Auto-clamp based on a fixed element height
$clamp(myParagraph, {clamp: '35px'});

2.2.2 jQuery.dotdotdot

下载地址 （个人或非营利性质，如果作商业用途则需要购买）
用法：

<script src="dotdotdot.js"></script>
<script>
  document.addEventListener( "DOMContentLoaded", () => {
     let wrapper = document.querySelector( "#element-to-truncate" );
     let options = {
        // [Options go here](https://dotdotdot.frebsite.nl/#options)
     };
     new Dotdotdot( wrapper, options );
  });
</script>

2.3 js实现

2.3.1 限制文本内字数（非行数），超出显示省略号

function wordlimit(cname,wordlength){                  //参数分别为：类名，要显示的字符串长度
    var cname=document.getElementsByClassName(cname);  //需要加省略符号的元素对象
    for(var i=0;i<cname.length;i++){　　　　　　　　　　　
       var nowhtml=cname[i].innerHTML;                //元素的内容
        var nowlength=cname[i].innerHTML.length;      //元素文本的长度
        if(nowlength>wordlength){
            cname[i].innerHTML=nowhtml.substr(0,wordlength)+'...';      //截取元素的文本的长度并加上省略号
        }
    }
}
wordlimit("sldiv",15);                                   //调用方法

2.3.2 算法实现

• 监听DOM尺寸变化
• 判断是否溢出 scrollHeight > offsetHeight
• 二分查找多行截取字符临界值（算法的解法：判断字符串是否溢出，二分查找字符串溢出临界子串，控制...显示）