1.一行超出就显示省略号
overflow:hidden;//将超出的部分隐藏 text-overflow:ellipsis;//超出部分用省略号显示 white-space:nowrap;//溢出不换行
2.多行情况下
overflow:hidden;//将超出的部分隐藏 text-overflow:ellipsis;//超出部分用省略号显示 display:-webkit-box;//将对象作为弹性伸缩盒子模型显示 -webkit-box-orient:vertical;//从上到下垂直排列子元素(设置伸缩盒子的子元素排列方式) -webkit-line-clamp:2;//这个属性不是css的规范属性,需要组合上面的两个属性,2表示显示的行数
本文详细介绍了如何使用CSS实现单行和多行文字超出显示省略号的效果,通过`overflow:hidden`、`text-overflow:ellipsis`和`white-space:nowrap`等属性,以及对于多行情况的特殊处理`-webkit-line-clamp`,帮助开发者创建更加美观且适应性的文本显示效果。

7986

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



