记录下看到的一个CSS巧用，非常 有意思。
1 常规的处理方法
<style>
.wrap {
width: 40vw;
border: 1px solid red;
font-size:large;
overflow:hidden;
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:4
}
</style>
<body>
<div class="wrap">
元宵来临，重大新闻，大家准备好祝福语了吗?下面是小编为大家整理的元宵节祝福语，欢迎大家阅读。1.
张灯结彩龙狮闹，团圆欢乐一家好，家庭事业火红照，
友情亲情绕，平安健康都来到，真情滋润好运交，元宵节的吉祥一路抛，洒下前程更
</div>
</body>
2 利用伪元素巧妙解决
<style>
.wrap {
width: 40vw;
border: 1px solid red;
max-height:90px;
overflow:hidden;
position:relative;
padding-right:1em;
text-align:justify;
}
.wrap::before{
content:'...';
position:absolute;
right:0;
bottom:0;
}
.wrap::after{
content:'';
background:#fff;
width:1em;
height:1em;
position:absolute;
display:inline;
right:0;
margin-top:0.5em;
z-index:1
}
</style>
<body>
<div class="wrap">
元宵来临，重大新闻，大家准备好祝福语了吗?下面是小编为大家整理的元宵节祝福语，欢迎大家阅读。1.
张灯结彩龙狮闹，团圆欢乐一家好，家庭事业火红照，
友情亲情绕，平安健康都来到，真情滋润好运交，元宵节的吉祥一路抛，洒下前程更
</div>
</body>
总结：没有溢出的时候，before伪元素一直在文本模块的右下角，但是上面盖着 after 伪元素，所以视觉上看不到省略号。当文本溢出的时候，遮盖省略号的 after 元素就会被挤下去。这时候before元素就露出来了。