一、首先是单行最简单的文本溢出省略
1、关键属性
overflow: hidden;/*隐藏超过外盒子宽度的内容*/
white-space: nowrap;/*文字不换行*/
text-overflow: ellipsis;/*文本溢出用省略号代替*/
2、代码
3、具体效果
二、然后是多行省略
1、关键属性
display: -webkit-box;/*弹性盒模型*/
-webkit-box-orient: vertical;/*设置元素垂直放置其内容*/
-webkit-line-clamp: 2;/*内容限制块元素到指定行数*/
2、代码
3、具体效果
4、不足
line-clamp等有兼容问题,在ie完全不兼容。
三、中间字段省略
1、关键属性
display: flex;/*水平排列*/
text-overflow: ellipsis;/*文本溢出用省略号代替*/
white-space: nowrap;/*文字不换行,或者用flex自带的不换行就可以*/