当“省略号”也开始讲究起来:关于 line-clamp 的一点不正经思考 在前端江湖摸爬滚打多年,我始终觉得,CSS 就像一个深不可测的黑洞,你以为掌握了它的皮毛,它却总能蹦出点新东西,让你惊呼:“原来还可以这样!” 最近,我被一个 CSS 属性狠狠地惊艳了一把,它就是 line-clamp。 line-clamp,顾名思义,就是用来限制文本显示行数的。说白了,就是让超出的文本优雅地变成省略号,而不是粗暴地溢出容器,搞得页面丑不拉几。 初识 line-clamp 时,我内心是平静的,甚至有点不屑:不就是个文本溢出省略嘛,text-overflow: ellipsis 加 overflow: hidden 再加个 white-space: nowrap 三件套,早就玩烂了,有什么稀奇的? 但当我真正开始使用 line-clamp 后,我才发现,我错了,而且错得很离谱。这玩意儿,简直就是前端界的瑞士军刀,简洁高效,优雅至极。 告别“祖传秘方”,拥抱现代魔法 想想以前,为了实现多行文本溢出省略,我们都经历了什么? 首先,我们需要设置容器的 overflow: hidden,把超出部分藏起来, …