文本隐藏

一、单行文本隐藏显示省略号
.ljl {
width: 200px;
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
}

二、多行文本超出显示省略号（常用方法1）
1、（因使用了WebKit的CSS扩展属性，该方法适用于WebKit浏览器及移动端）

.ljl {
width: 200px;
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}

注：CSS3 text-overflow 属性主要有：clip，ellipsis，string

2、利用伪类

<div id="con">
<span id="txt">文本溢出显示省略号,文本溢出显示省略号,文本溢出显示省略号,文本溢出显示省略</span>
<span class="t"></span>
</div>
<style>
#txt{
display: inline-block;
height: 40px;
width: 250px;
line-height: 20px;
overflow: hidden;
font-size: 16px;
}
.t:after{
display: inline;
content: "...";
font-size: 16px;

}
</style>

3、利用绝对定位和padding;(跨浏览器解决方案)

<p id="con2">文本溢出显示省略号,文本溢出显示省略号,文本溢出显示省略号,文本溢出显示省略<span class="t2">...</span>
</p>
<style>
#con2{
position: relative;
height: 40px;
width: 250px;
line-height: 20px;
overflow: hidden;
padding-right: 12px;
}
.t2{
position: absolute;
right: 0;
bottom: 0;
}
</style>

文本隐藏

原文：https://www.cnblogs.com/lhc1999/p/14703114.html