I am trying to limit the number of lines a title can be using -webkit-line-clamp
. However, because the title also has a reduced line-height
letters that have descenders ("g", "j", "p", "q", and "y") get cropped off on the bottom line. How can I fix this so the descenders of these letters do not get cropped out?
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>
I have to deal with such situation before and I used bit of a trick to add padding at the bottom just relative to font-size
so that it doesn't display next line and keep text still readable.
To fix the issue, add padding-bottom: 0.14em;
style to p
element. I have noticed values between 0.12 to 0.15 working best with different font families.
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>