使用 CSS 限制商品标题行数不超过两行

更新日期: 2019-04-13 阅读次数: 2059 字数: 138 分类: CSS

标题超出两行的部分显示为省略号

.name {
	overflow : hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	word-wrap: break-word;
	word-break: break-all;
        font-size: 0.9rem;
	height: 2.5rem;
}

文本截断效果如图:

使用 CSS 限制商品标题行数不超过两行

注意:

font-size: 0.9rem;
height: 2.5rem;
overflow : hidden;

非常重要,否则在微信浏览器内展示时,依然会显示第三行。

webkit-line-clamp

clamp 的中文意思是,钳子,也有夹紧的意思。

line-clamp 的作用是,将超出指定行数的文本截断。

领取阿里云/腾讯云服务器优惠券

关于作者

我是来自山东烟台的一名开发者,喜欢瞎折腾,顺便记记笔记。有敢兴趣的话题,欢迎加微信 zhongwei 聊聊。 白天写程序,晚上哄熊孩子,可能回复有点慢,见谅。 查看更多联系方式

相关文章

爱评论不评论

近期节日

2020年04月11日 世界帕金森病日
2020年04月19日 谷雨
2020年04月21日 复活节
2020年04月22日 世界地球日
2020年04月23日 世界读书日
2020年04月26日 知识产权日
2020年04月30日 佛诞
2020年04月30日 全国交通安全反思日
2020年05月01日 国际劳动节
2020年05月04日 五四青年节
2020年05月05日 立夏
2020年05月08日 世界红十字日
查看更多节日