css控制文本超出显示省略号

单行文本

先来简单说一下单行文本超出显示省略号的方法,大家基本都会了:

Element {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

含义什么的在此就不额外赘述了

多行文本

Element {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}	

但是这种方法有一个缺点, 它只能兼容谷歌内核的浏览器, 对于 **火狐/ie/欧朋** 等浏览器就行不通了

所以需要另一种方法来处理多浏览器的兼容问题

Element {
  position: relative;
  line-height: 24px;
  height: 72px;
  overflow:hidden;
}
	
Element:after {
  content: "...";
  position: absolute;
  bottom: 0;
  right: 0;
}

1. 将height设置为line-height的整数倍,防止超出的文字露出
2. 如果需要用ie7及以下版本的浏览器需要更换 after 伪类,因为ie7及以下版本的浏览器不显示 content 中的内容