Затухание последней строки текста, если больше n строк - PullRequest
Новая
       34

Затухание последней строки текста, если больше n строк

0 голосов
/ 02 мая 2018

Нам нужно показывать названия продуктов максимум на 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-я (+) строка или нет.

Я создал скрипку: https://jsfiddle.net/nq4ratr7/5/

Целью примера fiddle было бы показать все заголовки до 3 строк без затухания и затухания на 3-й строке для примера, который разбит на 4 («4 строки ...»).

О: из соображений производительности JS не должен использоваться. Я прекрасно понимаю, что с JS легко; -)

1 Ответ

0 голосов
/ 02 мая 2018

Хорошо, попытка номер 2, теперь я понимаю ваши реальные требования. Это было довольно забавное испытание!

Теперь нам нужен контейнер с включенным переполнением. Наложение находится внутри дочернего элемента и имеет высоту, полученную из 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>
...