单行文本溢出
.singleline-ellipsis {
overflow: hidden; // 文本长度超出限定宽度时,则隐藏超出内容
white-space: nowrap; // 设置文本不换行,在一行显示
text-overflow: ellipsis; // 当对象内文本溢出时显示省略标记(…) 注意:只有在设置了overflow:hidden和white-space:nowrap后text-overflow才能够生效的
}
多行文本溢出
.multiline-ellipsis {
overflow: hidden; // 溢出隐藏
word-break: break-all; // 如果文本为一段很长的英文,使用后能使一个单词能够在换行时进行拆分
text-overflow: ellipsis; // 当对象内文本溢出时显示省略标记(…)
display: -webkit-box; // 将对象作为弹性伸缩盒子模型显示
-webkit-line-clamp: 3; /* 控制显示的行数,表示展示X行后多余的缩略展示 */
-webkit-box-orient: vertical; // 设置或检索伸缩盒对象的子元素的排列方式
}