html 运用css实现多行省略号...

一直接触到最多的是单行文本溢出添加省略号，对于多行溢出，也会有一定的需求，这篇小札主要记录css实现多行文本溢出添加省略号。

html 代码

<div>
    <p>
        注意：
            1.一定要按这个结构写。
            2.你可以在外层div写你需要的样式。
            3.p的样式一定要写成下面css的代码，绝对不可以设置p的高度。    </p></div>

css样式

div{    /*可设置你需要的样式*/
    width:300px;
    height:300px;
    border:1px solid gray;
    padding:20px;
}
p{
    width：300px;/*可自定义，也可不设*/
    overflow:hidden;/*超出隐藏*/
    text-overflow:ellipsis;/*文本溢出时显示省略标记*/
    display:-webkit-box;/*设置弹性盒模型*/
    -webkit-line-clamp:3;/*文本占的行数,如果要设置2行加...则设置为2*/
    -webkit-box-orient:vertical;/*子代元素垂直显示*/}

结果：

显示结果

实现要点：

1.p标签绝对不可以设置高度，要让文本自己撑。

原因：在p标签里设置了overflow:hidden，如在p标签里设置了高度，虽然文本会按你所需要的行数添加省略号，但是省略号之后会继续显示后面的文本。如图：

若p添加高度

*overflow:hidden是只有在超出盒子的范围才会隐藏。

2.html结构需要按例子所写，标签可变

原因：之所以要求html这么写是因为你可以在外层div里设置你想要的样式，而不必更改p的样式，p的样式可复用，也可避免出现奇怪的样式。

3.-webkit-line-clamp:number；属性

解释：-webkit-line-clamp这个属性是设置你需要在多少行添加省略号，则写几行。如需要文本显示3行添加省略号，则写成-webkit-line-clamp:3;但是该属性需加上浏览器前缀才生效。

4.display:-webkit-box；属性

解释：display:-webkit-box；属性值为css3旧弹性盒模型，对css3不了解的可不必深究。

作者：whiteMu
链接：https://www.jianshu.com/p/d37ff912f164