前端片段-多行截断导致文字下伸部分（descender）被裁剪

案例中2kg中的字母g下方展示不全

<div class=”item-main line2″>蓝月亮 深层洁净护理洗衣液 自然清香 2kg</div>

.item-main {
margin-bottom: 12rpx;
line-height: 36rpx;
font-size: 32rpx;
color: #333;
font-weight: bold;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

.line2 {
white-space: normal !important;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}

产生原因：

1. -webkit-line-clamp 会用一个固定高度的“可视盒子”去裁剪文字，而不是动态撑开容器。
2. 如果 line-height 太小，或字体在垂直方向显示需要更多空间，下伸部分就会被切掉。
3. 一些浏览器渲染时，会在最后一行直接做 overflow:hidden，字母的下半部分就会消失。

这种写法本质上是通过 -webkit-line-clamp + display: -webkit-box 做多行截断，
字母比如 g、p、y 这些下半部分被截掉，是因为行高（line-height）和容器高度不匹配，导致下行字母下方的下伸部分（descender）被裁剪了。

解决方案：

1.调整行高

line2 {
line-height: 1.5; /* 或更大，让 descender 有足够空间 */
}

安全行高 ≈ 字体大小 × 1.4~1.5

• 如果 font-size: 12px → 16~18px 行高

• 如果 font-size: 14px → 20px 行高

• 如果 font-size: 16px → 22~24px 行高

这样设置后，-webkit-line-clamp 再裁剪时就不会“剃掉”字母的下沿。

2.留出额外的 padding-bottom

line2 {
padding-bottom: 2px; /* 给底部腾点空间，避免裁剪 */
}

3.使用更安全的字体

某些字体（尤其是英文字体）下伸部分占比很大，换成兼容性更好的字体会好一些。

示例改写：

.item-main {
padding-bottom: 12rpx;
line-height:48rpx;
font-size: 32rpx;
color: #333;
font-weight: bold;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}