前言
在电商行业写代码,经常会遇到视觉要求标题或描述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; //超出隐藏
}
如果去掉overflow则可以看到一下效果:
多行文本截断
文本截断同单行原理:
.n-line-cut{
background: yellow;
width: 145px;
height: 38px; //设置小于2倍行高的高度,但是大于2倍字高+(line-height - font-size)的高度
line-height: 20px;
font-size: 14px;
overflow: hidden;
}