文本溢出处理：省略号样式

一、单行文本溢出

1、white-space: nowrap;  设置文本内容不换行

2、overflow: hidden;  超出部分隐藏

3、text-overflow: ellipsis;  显示省略号

        .single-line {
            width: 300px;
            height: 20px;
            line-height: 20px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;

        }

二、多行文本溢出

css实现

1、display: -webkit-box;  设置弹性伸缩盒子模型（因为只有该盒子模型提供了相应标准）

2、-webkit-box-orient: vertical;  子元素垂直排列

3、-webkit-line-clamp: 3;   显示文本行数为3行

4、overflow: hidden;  超出部分隐藏

5、text-overflow: ellipsis;  显示省略号

.multi-line {
            width: 300px;
            height: 60px;
            line-height: 20px;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 3;
            overflow: hidden;
            text-overflow: ellipsis;
        }

 

js实现

1、定义文本内容

2、获取显示文本的div

3、计算需要显示的字数：client获取div的宽度，除以fontt-size的大小得到一行显示的字数，再乘以3得到三行的总字数

4、substr函数截取文本需要显示的部分，注意num-1，因为最后一个字被省略号替代，最后innerHTML将截取出来的文本插入div中

5、注意js代码应该写在html标签后面，因为只有html加载完毕才能获取到div的高度，否则会报错

        .line {
            width: 300px;
            height: 60px;
            line-height: 20px;
            font-size: 15px;
        }

<script>
    var content = "多行文本的溢出处理：这是一个多行文本，这是一个多行文本，这是一个多行文本，这是一个多行文本，这是一个多行文本，这是一个多行文本，这是一个多行文本，这是一个多行文本，这是一个多行文本，这是一个多行文本，这是一个多行文本，这是一个多行文本";
    var line = document.querySelector(".line");
    var num = line.clientWidth / 15 * 3;
    line.innerHTML = content.substr(0, num - 1) + "..."
</script>