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>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

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>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

I'm hoping that I won't have to wrap it around another div

CodePudding user response：

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>

<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

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>

<iframe name="sif4" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>