使用css对实现文本省略

1.单行文本省略

对容器盒子使用下列css代码

• white-space: nowrap: 禁止文本换行。
• overflow: hidden: 隐藏超出容器范围的内容。
• text-overflow: ellipsis: 使用省略号表示被隐藏的文本。

2.多行文本省略

需要浏览器兼容webkit，使用webkit-line-clamp限制文本的行数

• display: -webkit-box: 将元素设置为WebKit内核的弹性盒子模型。
• -webkit-box-orient: vertical: 设置弹性盒子的排列方向为垂直。
• -webkit-line-clamp: 2: 限制显示的文本行数。
• overflow: hidden: 隐藏超出容器范围的内容。