单行多行文本截断/省略小结 | CRR

170

前言

在电商行业写代码,经常会遇到视觉要求标题或描述n行截断/省略的问题。

CSS布局并不难,但是在安卓和ISO的机型上H5页面,会遇到不同的视觉表现,省略没有影响,但是截断,由于大部分安卓机型上文字会偏上,会导致后面的文本会露出文字顶部的一点点

单行文本省略

这是四类中最简单的CSS布局:

.one-line-ellipsis{
	background: yellow;
	width: 150px; //限制宽度
	font-size: 15px;
	text-overflow: ellipsis; //省略号
	white-space: nowrap; //限制不换行
	overflow: hidden; //超出隐藏
}

单行文本省略

单行文本截断

.one-line-cut{
	background: yellow;
	width: 145px;
	height: 23px; //设置小于line-height,大于(line-height - font-size) / 2 + font-size的高度
	line-height: 24px; //设置大于字高的行高
	font-size: 16px;
	overflow: hidden; //超出隐藏
}

单行文本截断

为何要设置小于line-height,大于(line-height - font-size) / 2 + font-size的高度呢?
因为安卓机型上line-height限制的文字存在偏高的现象,如果height=line-height往往下一行的文字就会溢出一点点顶部。

多行文本省略

假如2行文本省略:

.n-line-ellipsis{
	background: yellow;
	width: 145px;
	height: 40px; //设置2倍行高的高度
	line-height: 20px;
	font-size: 16px; 
	display: -webkit-box; //设置弹性box布局
	-webkit-line-clamp: 2;  //限定2行
	-webkit-box-orient: vertical; //设置展示方向
	overflow: hidden; //超出隐藏
}  

2行文本省略

如果去掉overflow则可以看到一下效果:
2行文本省略无overflow

多行文本截断

文本截断同单行原理:

.n-line-cut{
	background: yellow;
	width: 145px;
	height: 38px; //设置小于2倍行高的高度,但是大于2倍字高+(line-height - font-size)的高度
	line-height: 20px;
	font-size: 14px;
	overflow: hidden;
}  

2行文本截断