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

【问题标题】：Descenders of letters get cropped out when using -webkit-line-clamp with reduced line-height使用 -webkit-line-clamp 降低行高时，字母的后裔会被裁剪掉
【发布时间】：2020-09-28 17:08:21
【问题描述】：

我正在尝试限制标题可以使用-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>

【问题讨论】：

那么为什么要限制行高，因为这是问题所在？
降低行高可以让标题占用更少的空间，并且看起来更好。同样的原因，我首先使用 line-clamp 来限制行数。 imgur.com/ijQz4s2
好吧，避免这个问题的唯一方法是让行高为 1 或更大。这就是line-height 的意义所在。
@Paulie_D 显然这不是真的。我已经编辑了 sn-p 和 line-height 的 1 下降仍然被切断。有趣的是，如果文本很小，则不会发生这种情况。
已更新以显示在使用引导程序时问题会更严重地发生，包括在较小的文本大小时。

标签： css bootstrap-4

【解决方案1】：

我之前必须处理这种情况，我使用了一些技巧，在底部相对于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>

【讨论】：