Почему line-clamp не работает с отступами? ⇐ Html

[Anonymous]

Я пытаюсь зафиксировать 3 строки, но по какой-то причине, когда я добавляю отступы, это не работает и перемещается на 4 строки следующим образом:

Код: Выделить всё

.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;
}

Код: Выделить всё

Testing Testing Testing Testing Testing Testing Testing

Как это исправить?
Изменить:
Приношу извинения, я забыл упомянуть, что мне нужна рамка внизу, вот так:
< div class="snippet">

Код: Выделить всё

.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;
}

Код: Выделить всё

Testing Testing Testing Testing Testing Testing Testing

Testing Testing Testing Testing Testing Testing Testing

Надеюсь, мне не придется оборачивать его вокруг другого div

Подробнее здесь: https://stackoverflow.com/questions/702 ... th-padding