Почему line-clamp для обрезания строк отображает текст ниже троеточия?

Question

[MishaXXL]

Работая над блоком столкнулся с такой проблемой, что текст вроде на второй строке заканчивается троеточием, но ниже виднеется верх третьей строки
Из-за чего это и как исправить?

https://jsfiddle.net/w0p9Lx6j/

Answer 1

[Сергей delphinpro]

Padding уберите у параграфа. Используйте отступы на внешнем элементе, если необходимо.

Кстати, попробуйте увеличить паддинг до больших значений (~50px), увидите как работает лайн-кламп.

Comments

[MishaXXL]

Убрал, не помогло

[Сергей delphinpro]

MishaXXL, ну потому что теперь у вас блок растягивается по вертикали за счет того, что он является потомком флекс контейнера со свойством align-items: stretch

Или флекс уберите, или задайте align-items: center

Я думал будет понятна причина такого поведения... Объясню: блок с клампом получает высоту большую, чем две строки, которые вы задали. Поэтому и видны остальные строки. Исключите любое воздействие на высоту данного блока и будет вам счастье.

[MishaXXL]

Сергей delphinpro, спасибо!
Подскажи пожалуйста, почему align-items влияет на высоту дочерних элементов?
Ведь это позиционирование, а не размер

[Сергей delphinpro]

MishaXXL, для дива задан flex. Свойство align-items не указано, значит оно примет значение по умолчанию - stretch. Это значение заставляет дочерние элементы растягиваться на всю высоту флекс-контейнера.