HTML-CSS(二十三)通过css样式添加省略号

为什么我们要添加省略号呢？而不是直接自己写个省略号代替超出的文章段落呢？原因很简单。如果我们直接使用省略号去取代我们的后面段落，那么我们以后要是想通过js去展开，那么就是空白的。但是如果是通过css样式添加的省略号，那么通过js去改变css样式布局，就能够看到完整的段落摸样了。

单行省略号的实现

width：必须有固定宽高

white-space:nowrap 不让折行

overflow：hidden 隐藏溢出内容

text-overflow:ellipsis 添加省略号

多行段落添加省略号

多行文本添加省略号没有单行文本的兼容性好，有较大兼容性问题。适合于webkit浏览器或移动端

实现

width：必须有固定宽高
text-overflow:ellipsis 添加省略号
overflow：hidden 隐藏溢出内容
display: -webkit-box;弹性盒模型显示
-webkit-line-clamp: number;限制在一个块元素显示的文本的行数
-webkit-box-orient: vertical;设置或检索伸缩盒对象的子元素排列方式.设置和检索的就是检索排列的行数，根据设置的行数，进行压缩

注意：限制块元素显示文本的行数时，不能超过或者等于它本身正常显示的行数，否则添加省略号无效