css实现超出部分不显示并显示省略号

Bincker 6月前 ⋅ 70 阅读

单行的文本溢出实现

overflow: hidden;//溢出部分隐藏
text-overflow: ellipsis;//把最后几个字符换为省略号
white-space: nowrap;//让文本不换行

多行文本溢出实现

overflow: hidden;
text-overflow: ellipsis;
display:-webkit-box; //设置为弹性伸缩盒子模型
-webkit-box-orient: vertical; //设置伸缩盒子模型的元素排列方式为纵向
-webkit-line-clamp: 2; //显示的行数

多行原理和单行差不多,只不过显示方式需要改一下,使得可以显示多行。 还有一种固定高度的情况,我暂时没有找到解决办法,如果以后遇到再补充:)


全部评论: 0

    我有话说: