单行处理代码展示:
注意点:单行文本溢出显示省略号 一定记得给固定的宽度
CSS主要生成代码:
/* 1.超出的文本强制在一行显示 */
white-space: nowrap;
/* 2.超出部分隐藏 */
overflow: hidden;
/* 3.显示省略号 */
/* ellipsis 省略号 */
text-overflow: ellipsis;`
多行处理代码展示:
注意点:多行文本溢出要给固定高度,在实际开发中建议后端处理
CSS主要生成代码:
/* 溢出隐藏 */
overflow: hidden;
/* 先省略号 */
text-overflow: ellipsis;
/* 弹性盒子模型 */
display: -webkit-box;
/* 第几行显示省略号 写数字几就表示第几行显示省略号*/
-webkit-line-clamp: 2;
/* 浏览器兼容性 */
-webkit-box-orient: vertical;