css文本溢出省略

一、首先是单行最简单的文本溢出省略

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自带的不换行就可以*/

2、代码

3、具体效果