超出隐藏代码:
/* 文字超出两行展示省略号 */
.school-info-show {
.two-row-hide {
white-space: normal;
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
}
原本页面使用方式,出现第三行部分溢出:
<div class="school-info-show font14">{{item.name}}</div>
解决方案(修改后):
<div class="font14">
<span class="school-info-show">{{item.name}}</span>
</div>
文章介绍了如何使用CSS样式处理文字超出两行后显示省略号的效果,以及针对原有代码存在的第三行溢出问题给出的修正方案,即通过添加<span>标签并调整样式来正确实现文字截断。
2347

被折叠的 条评论
为什么被折叠?



