css 使用-webkit-line-clamp时，字母的下行部分被裁剪掉，行高降低

stszievb 于 2023-03-14 发布在其他

关注(0)|答案(2)|浏览(220)

我尝试使用-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>

css

来源：https://stackoverflow.com/questions/63977541/descenders-of-letters-get-cropped-out-when-using-webkit-line-clamp-with-reduced

2条答案

按热度按时间

qvsjd97n1#

我以前也遇到过这种情况，我用了一点技巧在底部添加了相对于font-size的填充，这样它就不会显示下一行，并保持文本仍然可读。
要解决这个问题，请在p元素中添加padding-bottom: 0.14em;样式。我注意到在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>

赞(0）回复(0）举报 2023-03-14

ar7v8xwq2#

我在使用Tailwind线夹插件时也遇到了同样的问题（它实际上与使用line-clamp-2类的上述属性相同）。
Poppins似乎是一个可怕的字体为这一点，它剪辑了字母g的底部与padding-bottom: 0.0725em，它揭示了下一行的顶部（即：隐藏的箝位区域的顶部）具有padding-bottom: 0.073em。
我修正了我的问题，将行高从1改为1.3，并且没有底部填充。它增加了每行文本之间的填充，但可以忽略不计。

赞(0）回复(0）举报 2023-03-14

我来回答

css 使用-webkit-line-clamp时，字母的下行部分被裁剪掉，行高降低

2条答案

相关问题

热门标签

最新问答