小程序多行文本溢出显示省略号

这个问题,其实问题不大,但是解决了一会,主要原因有2个:

1、一开始考虑使用单行超出省略号的方式来做:

{
	white-space: nowrap; 
	overflow: hidden;
	text-overflow: ellipsis; //尤其注意3个样式顺序上下不能乱写,会不生效,
							   先不换行,然后超出隐藏,超出隐藏显示省略号
}

这是单行文本的方式,一开始想着加固定高度,后来发现设备像素问题,出现有的设备会遮住半行,突然觉得不对,应该不是这样做。

2、被设备像素问题舞蹈去查找是不是不同设备里行高变化了

后来查询到的多行注释文本里,使用伪类太麻烦,于是查到一种样式:

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

这种css只适用于webkit和移动端,于是完美使用在小程序上,但是记得不能设置固定高度!!切记!

你可能感兴趣的:(小程序,CSS)