CSS文字溢出处理问题

单行省略

div {
	white-space:nowrap; //断行处理：无断行
	text-overflow:ellipsis; //文字溢出处理：省略号
	overflow:hidden;	//溢出处理：隐藏
}

多行省略

• 非IE和火狐

div {
	display:-webkit-box;
	-webkit-line-clamp:2;
	-webkit-box-orient:vertival;
	overflow:hidden;
}

-IE和火狐

.fade {
  position: relative;
  height: 3.6em; /* exactly three lines */
}
.fade:after {
  content: "";
  text-align: right;
  position: absolute;
  bottom: 0;
  right: 0;
  width: 70%;
  height: 1.2em;
  background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 50%);
}

参考链接：https://css-tricks.com/line-clampin/

转载于:https://www.cnblogs.com/YooHoeh/p/10465736.html