使用-webkit-line-clamp降低行高时，字母的后缀会被裁剪掉

如何解决使用-webkit-line-clamp降低行高时，字母的后缀会被裁剪掉

我正在尝试限制标题可以使用-webkit-line-clamp的行数。但是，由于标题的line-height字母也减少了，因此其底线（“ g”，“ j”，“ p”，“ q”和“ y”）降级了。如何解决这个问题，使这些字母的后代不会被裁剪掉？

p {
    width: 140px;
    -webkit-line-clamp: 2;
    -webkit-Box-orient: vertical;
    word-break: break-word;
    display: -webkit-Box;
    overflow: hidden;
    line-height: 1;
}

p.small {
    width: 100px;
    font-size: 12px;
}

p.large {
    font-size: 22px;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZonixN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

<p title='The "g" in this title gets cut off at the bottom'>The "g" in this title gets cut off at the bottom</p>
<p class="large" title='The "g" in this title gets cut off at the bottom'>The "g" in this title gets cut off at the bottom</p>
<p class="small" title='The "g" in this title gets cut off at the bottom'>The "g" in this title gets cut off at the bottom</p>

解决方法

之前，我不得不处理这种情况，我使用了一些技巧，在底部相对于font-size添加了填充，以使它不会显示下一行并保持文本可读性。

要解决此问题，请将padding-bottom: 0.14em;样式添加到p元素中。我注意到在0.12到0.15之间的值最适合使用不同的字体系列。

p {
    width: 140px;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-word;
    display: -webkit-box;
    overflow: hidden;
    line-height: 1;
    padding-bottom: 0.14em;
}

p.small {
    width: 100px;
    font-size: 12px;
}

p.large {
    font-size: 22px;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

<p title='The "g" in this title gets cut off at the bottom'>The "g" in this title gets cut off at the bottom</p>
<p class="large" title='The "g" in this title gets cut off at the bottom'>The "g" in this title gets cut off at the bottom</p>
<p class="small" title='The "g" in this title gets cut off at the bottom'>The "g" in this title gets cut off at the bottom</p>