CSS截断文字技巧

在响应式设计中,经常需要将文字截断,例如一个两列水平排列的列表,通常不希望li的内容换行,当视图尺寸过小时内容就会被挤到第二行,常用的截断方法为:

li {
	white-space: nowrap;
	overflow: hidden;
}

该方法有一个问题,经常会遇到最后一个文字被截断一半,很难看。

更理想的截断方法为:

li {
	height: 1.65em;
	overflow: hidden;
}

这里假设你的行高line-height为1.65,请根据你的实际情况取值。

如果height设置为1em而不是行高的值,会导致类似p字母之类的带有尾巴的英文字母被截断下半截。

原创文章,作者:,如若转载,请注明出处:https://ce.771633.xyz/1436.html

Like (0)
Previous 2025年3月8日
Next 2025年3月8日

相关推荐

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注