单行文本省略号...
核心css代码如下:
1.overflow:hidden; (意思就是超出你限定的宽度它就会隐藏内容)。
2.white-space:nowrap; (这个是设置文字在一行显示不能换行)。
3.text-overflow:ellipsis; (这个规定当文本溢出时显示省略号来代表被修剪的部分)。
单行文本省略号就完了,是不是很简单呢!
然后,我们一起来看一下多行文本省略号!
多行文本省略号...
核心css代码如下:
1.-webkit-line-clamp:2; (用来限制在一个块元素显示的文本行数,“2”表示最多显示为2行。PS:为了实现该效果,他需要组合其他webkit属性)。
2.display:-webkit-box; (和1结合使用,将对象作为弹性伸缩盒子显示)。
3.-webkit-box-orient:vertical; (和1结合使用,设置或检索伸缩盒对象的子元素的排列方式)。
4.overflow:hidden; (顾名思义就是超出限定的宽度就隐藏内容)。
5.text-overflow:ellipsis; (文本溢出时用省略号显示)。
好了,现在多行文本省略号就完了,觉得有用的可以关注一下我哦!