why is line-clamp not working with padding?

Question

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

Answer 1

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>

Answer 2

line-clamp is just clamping the text after set lines. But it is not removing text from the dom.

For example, line-clamp: 3 results in the following:

Hello World
This is
An Exammple...
For this Post

This is why we add an overflow: hidden; to hide it.

But an padding will make your box bigger, so the overflow is only happing after your padding.

A solution can be to wrap your title in an wrapper div and set the padding there.

Snippet contains an example without the overflow, for visualiziation

 .title{ padding:1rem; width:10%; background-color:red; word-break: break-all; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }

 <div class='title'> Testing Testing Testing Testing Testing Testing Testing </div>