开发过程中我们可能会遇到这样的需求:
有一行文本,不足一行,全部显示,超出一行,行尾显示为省略号。
可能你会有些扫操作,用 JS 去动态的判断,尽管效果已经实现,但是看上去搓的一逼,配不上前端这个词。
下面给你介绍 两种 优雅的 方式 ,来实现这个效果。
HTML如下:
<div class="text-to">
这是测试,这是测试,这是测试,这是测试,这是测试,这是测试,这是测试,
这是测试,这是测试,这是测试,这是测试,这是测试,这是测试,这是测试,
这是测试,这是测试,这是测试
</div>
1:一行,超出显示为省略号
.overflow-to-ellipsis{
width: 200px;
background: red;
color: white;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
效果如图:
但是,某些时候,产品经理似乎总有改不完的需求和各式各样变态的需求。
比如,两行超出显示为省略号
再比如,三行超出显示为省略号
再比如......
2、多行,超出显示为省略号
备注:此方法兼容性不佳,safari 和 chrome 支持比较好,所以感觉在 移动端 比较好用吧
.text-to {
background: red;
color: white;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
}
效果如下:
修改 -webkit-line-clamp 的 值,就可以控制行数。