一文大白话讲清楚CSS单行和多行文本溢出的省略样式

一文大白话讲清楚CSS单行和多行文本溢出的省略样式

1.啥是文本溢出

• 一句话，就是文字的宽度超出了我们设定的元素的宽度，放不下了。
• 比如我div的宽度设置为100px,现在所有的文字加起来的宽度是200px，那怎么办
• 三种办法
• 1. 直接换行显示
• 2. 不换行，多出的文字截掉，用…代替，这就是单文本溢出省略符替代
• 3. 换行，但是不能无限换行，换个几行或者高度超过了设定的高度，如果还显示不下，剩下的也截掉，用…代替；这就是多行文本溢出省略符替代

2. 单行文本溢出省略符样式

• 通过上面的分析我们明白，如果要让单行文本溢出用…代替，需要满足三个条件
• 1. 文本不能换行，设置white-space:nowrap
• 2. 超出的部分要截掉,设置overflow:hidden
• 3. 指定一下截掉的文本用…代替，设置text-overflow:ellipse
• 上代码

<meta charset="utf8">
<style>
    #div{
        width: 200px;
        height: 40px;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
        border: 1px solid black;
    }
</style>
<div id="div">我是单行文本我是单行文本我是单行文本我是单行文本我是单行文本我是单行文本我是单行文本我是单行文本</div>

3. 多行文本溢出省略符样式

• 多行文本超出省略因为是多行，所以就可以两种方式限定
• 一种是，限定行数，超过了函数就用…代替
• 一种是不管行数，你爱几行几行，我管高度，超过这个高度就用…代替

3.1 行数截断

• 1.设定文本的行数，设置-webkit-line-clamp,这个属性需要配合使用display:-webkit-box和-webkit-box-orient:vertical一起使用
• 2. 超出的部分要截掉,设置overflow:hidden
• 3. 指定一下截掉的文本用…代替，设置text-overflow:ellipse
• 上代码

<meta charset="utf8">
<style>
    #div{
        width: 200px;
        -webkit-line-clamp:2;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow:hidden;
        text-overflow:ellipsis;
        border: 1px solid black;
    }
</style>
<div id="div">我是多行文本我是多行文本我是多行文本我是多行文本我是多行文本我是多行文本我是多行文本我是多行文本我是多行文本</div>

3.2 高度截断

• 利用 伪元素+定位
• 原理就是通过伪元素将“…”绝对定位到行尾并遮住文字，在通过overflow:hidden隐藏多余的文字

<style>
    .div{
        position:relative;
        line-height: 20px;
        height: 40px;
        overflow: hidden;
    }
    .div::after{
        content: '...';
        position: absolute;
        bottom:0;
        right: 0;
        padding: 0 20px 0 10px;
    }
</style>

<div id="div">我是多行文本我是多行文本我是多行文本我是多行文本我是多行文本我是多行文本我是多行文本我是多行文本我是多行文本</div>