css 文本超出就隐藏并且显示省略号

一、单行文本溢出显示省略号

overflow:hidden; //超出的文本隐藏
text-overflow:ellipsis; //溢出用省略号显示
white-space:nowrap; //溢出不换行

二、多行文本溢出显示省略号

overflow: hidden;
text-overflow: ellipsis;
display:-webkit-box; //作为弹性伸缩盒子模型显示。
-webkit-box-orient:vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直排列
-webkit-line-clamp:2; //显示的行

三、**跨浏览器兼容的方案**

比较靠谱简单的做法就是设置相对定位的容器高度，用包含省略号（...）的元素模拟实现

p{
    position:relative;
    line-height:1.4em;
    /*设置容器高度为3倍行高就是显示3行*/
    height:4.2em;
    overflow:hidden;
}
p::after{
    content:'...';
    font-weight:bold;
    position:absolute;
    bottom:0;
    right:0;
    padding:0 20px 1px 45px;
    background:#fff;
}

注意：IE6-7不显示content内容，所以要兼容IE6-7可以是在内容中加入一个标签，比如<span>...</span>去模拟；要支持IE8，需要将::after替换为:after

交流

1、QQ群：可添加qq群共同进阶学习： 进军全栈工程师疑难解  群号:   856402057

2、公众号：公众号「进军全栈攻城狮」 ，对前端技术保持学习爱好者。我会经常分享自己所学所看的干货，在进阶的路上，共勉！通过公众号可加我vx拉群