I’m trying to line-clamp 3 lines, but for some reason when I add padding it doesn’t seem to work and moves to 4 lines like this:
.title{
padding:1rem;
width:10%;
background-color:red;
word-break: break-all;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: hidden;
}<div class='title'>
Testing Testing Testing Testing Testing Testing Testing
</div>How do I fix it?
Edit:
My apologies, I forgot to mention I require border at the bottom like this:
.title{
padding:1rem;
width:10%;
background-color:red;
word-break: break-all;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: hidden;
}
.title:nth-of-type(1){
border-bottom:solid 1px black;
}<div class='title'>
Testing Testing Testing Testing Testing Testing Testing
</div>
<div class='title'>
Testing Testing Testing Testing Testing Testing Testing
</div>I’m hoping that I won’t have to wrap it around another div
>Solution :
add a transparent border instead
.title{
border:1rem solid #0000;
box-shadow:0 1px 0 #000; /* your border */
margin-bottom:1px;
width:10%;
background-color:red;
word-break: break-all;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: hidden;
}<div class='title'>
Testing Testing Testing Testing Testing Testing Testing
</div>