Затухание последней строки текста, если больше n строк
Нам нужно отображать названия продуктов максимум на 3 строках и убрать 3-ю строку Только, если заголовок разбивается на более чем 3 строки.
То, что я до сих пор пытался решить, это наличие оболочки с максимальной высотой в 3 строки, заголовком в ней и псевдоэлементом, который накладывается на градиент постепенного исчезновения (соответственно, переход от перехода к белому).
.title:after {
background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 75%, rgba(255, 255, 255, 1) 100%);
content: '';
width: 100%;
height: 1.3rem;
position: absolute;
top: 2rem;
left: 0;
}
Проблема в том, что это происходит независимо от того, есть ли 4-я (+) строка.
Я создал JSFiddle: https://jsfiddle.net/nq4ratr7/5/
Целью скрипта-примера было бы показать все заголовки до 3 строк без затухания и затухание на 3-й строке для примера, который разбивается на 4 («4 строки ...»).
По соображениям производительности не следует использовать JS. Я прекрасно понимаю, что с JS это просто.
попытался уточнить выше
Ответы 1
Для этого нужен контейнер с переливом. Наложение находится внутри дочернего элемента и имеет высоту, полученную из calc(100% - (line-height × 3)), что даст либо отрицательное число (которое браузер преобразует в 0), либо 0, либо избыточную высоту. Затем мы используем градиент фиксированной высоты с repeating-linear-gradient и перемещаем его вверх на (line-height).
.holder {
width: 275px;
}
.title {
margin: 30px 0;
max-height: 75px; /* line-height × 3 */
overflow: hidden;
}
.title > h2 {
position: relative;
margin: 0;
padding: 0;
line-height: 25px;
font-size: 18px;
}
.title > h2::after {
content: '';
display: block;
position: absolute;
right: 0;
bottom: 0;
left: 0;
height: calc(100% - 75px); /* 100% - (line-height × 3) */
transform: translateY(-25px); /* 0 - line-height */
background: repeating-linear-gradient(rgba(255, 255, 255, 0), #ffffff 25px); /* line-height */
}<div class = "holder">
<div class = "title">
<h2>1 line of text 1 line of text</h2>
</div>
<div class = "title">
<h2>2 lines of text 2 lines of text 2 lines of text 2 lines of text 2 lines of text</h2>
</div>
<div class = "title">
<h2>3 lines of text 3 lines of text 3 lines of text 3 lines of text 3 lines of text 3 lines of text 3 lines of text</h2>
</div>
<div class = "title">
<h2>4 lines of text 4 lines of text 4 lines of text 4 lines of text 4 lines of text 4 lines of text 4 lines of text 4 lines of text 4 lines of text 4 lines of text</h2>
</div>
<div class = "title">
<h2>5 lines of text 5 lines of text 5 lines of text 5 lines of text 5 lines of text 5 lines of text 5 lines of text 5 lines of text 5 lines of text 5 lines of text 5 lines of text 5 lines of text</h2>
</div>
<div class = "title">
<h2>6 lines of text 6 lines of text 6 lines of text 6 lines of text 6 lines of text 6 lines of text 6 lines of text 6 lines of text 6 lines of text 6 lines of text 6 lines of text 6 lines of text 6 lines of text 6 lines of text 6 lines of text</h2>
</div>
</div>
Таким образом, заголовки с 3 строками будут отображаться полностью (строки 1, 2 и 3), а заголовки с 4 строками будут отображаться частично (строка 1 полностью, 2 полностью, 3 блеклые и 4 скрытые)?