使用-webkit-line-clamp实现多行截断时字体底部被裁剪的原因是什么

这不是浏览器兼容性bug，属于行高配置与CSS截断逻辑的预期不符导致的必然现象，根本原因如下：

1. 行高预留空间不足以容纳字体实际渲染高度 #

你当前使用的无单位行高1.12换算为实际像素值为：33px * 1.12 = 36.96px，每一行的上下半行距（即文字到行框边界的距离）为：(36.96px - 33px) / 2 = 1.98px。

绝大多数商用字体的实际渲染高度都会超出font-size定义的em-square边界：中文的撇捺下端、英文的g/y/p等带下沉部的字符，底部通常会超出font-size下限3px~6px，远大于你预留的1.98px下半行距。第三行的文字底部自然会超出该行的行框范围，被overflow: hidden直接裁剪。

2. 小数像素高度的浏览器舍入误差 #

你三行内容的总理论高度为：3 * 36.96px = 110.88px，目前所有主流浏览器对非整数像素的容器高度都会默认向下取整，实际渲染时容器高度会被压缩为110px，进一步挤压了第三行的可用空间，放大了裁剪问题。

你只需要适当调高行高到1.2~1.3，或者给截断容器添加极少量的padding-bottom即可解决该问题。

内容的提问来源于stack exchange，提问作者Lovor