почему линейный зажим не работает с прокладкой?

#html #css

#HTML #CSS

Вопрос:

Я пытаюсь выровнять 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; }

 lt;div class='title'gt;  Testing Testing Testing Testing Testing Testing Testing lt;/divgt;

Как мне это исправить?

Редактировать:

Мои извинения, я забыл упомянуть, что мне нужна граница внизу, вот так:

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

 lt;div class='title'gt;  Testing Testing Testing Testing Testing Testing Testing lt;/divgt;  lt;div class='title'gt;  Testing Testing Testing Testing Testing Testing Testing lt;/divgt;

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

Ответ №1:

вместо этого добавьте прозрачную рамку

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

 lt;div class='title'gt;  Testing Testing Testing Testing Testing Testing Testing lt;/divgt;

Ответ №2:

line-clamp это просто зажим текста после заданных строк. Но это не удаление текста из dom.

Например, line-clamp: 3 это приводит к следующему:

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

Вот почему мы добавляем overflow: hidden; , чтобы скрыть это.

Но заполнение сделает вашу коробку больше, так overflow что это происходит только после заполнения.

Решением может быть обернуть ваш заголовок в обертку div и установить там отступ.

Фрагмент содержит пример без переполнения для визуализации

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

 lt;div class='title'gt;  Testing Testing Testing Testing Testing Testing Testing lt;/divgt;