标签：多行 right 省略号 祝福语 元宵节 wrap css before
记录下看到的一个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元素就露出来了。
标签：多行,right,省略号,祝福语,元宵节,wrap,css,before 来源： https://www.cnblogs.com/hjj2ldq/p/14207035.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。