CODERAM.DEV

Как скрыть лишний текст в блоке

Имеем несколько колонок с разным по длине текстом, нужно сделать их одинаковой высоты и скрыть лишнее.

HTML-разметка:

  1. <div class="items">
  2. 	<div class="items-row">
  3. 		<h3>Блок #1</h3>
  4. 		<div class="items-text">
  5. 			Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
  6. 			Proin blandit magna eu tempus ullamcorper. Sed porta justo 
  7. 			sed nibh elementum condimentum.
  8. 		</div>
  9. 	</div>
  10. 	<div class="items-row">
  11. 		<h3>Блок #2</h3>
  12. 		<div class="items-text">
  13. 			Quisque non eros sit amet elit commodo maximus eget a eros. 
  14. 			Curabitur malesuada neque eu neque suscipit, sit amet efficitur 
  15. 			lorem pharetra. Curabitur et risus eu lacus lacinia convallis.
  16. 			Integer faucibus tellus sed congue finibus. Vestibulum eu felis 
  17. 			consectetur, blandit libero eu, vulputate neque. Cras et ex a 
  18. 			urna aliquam faucibus sed quis elit.
  19. 		</div>
  20. 	</div>
  21. 	<div class="items-row">
  22. 		<h3>Блок #3</h3>
  23. 		<div class="items-text">
  24. 			Etiam eu lorem sit amet mi bibendum auctor. Mauris nec risus 
  25. 			a erat rutrum blandit. Vivamus sodales erat sit amet nibh elementum egestas.
  26. 		</div>
  27. 	</div>
  28. </div>

Первое что можно сделать, это установить высоту блока, а лишнее скрыть с помощью overflow: hidden.
  1. .items-text {
  2. 	height: 62px;
  3. 	overflow: hidden;
  4. }

Многоточие
Свойство text-overflow: ellipsis добавляет многоточие к скрываемому тексту и работает только в паре с white-space: nowrap (отменяет переносы строк). Но можно сделать такой приём для нескольких строк текста с помощью свойств display: -webkit-box и -webkit-line-clamp: 4.
  1. .items-text {
  2. 	overflow: hidden;
  3. 	text-overflow: ellipsis;
  4. 	display: -webkit-box;
  5. 	-webkit-line-clamp: 4;
  6. 	-webkit-box-orient: vertical;
  7. }

Градиент по тексту
В конец блока с текстом можно наложить абсолютный элемент с градиентом от прозрачного до белого, так получится эффект «затухания».
  1. .items-text {
  2. 	overflow: hidden;
  3. 	position: relative;
  4. 	height: 62px;
  5. }
  6. .items-text:after {
  7. 	content: "";
  8. 	text-align: right;
  9. 	position: absolute;
  10. 	bottom: 0;
  11. 	right: 0;
  12. 	width: 70%;
  13. 	height: 1.2em;
  14. 	background: linear-gradient(to right, rgba(255, 255, 255, 0), white 100%);
  15. 	pointer-events: none;
  16. }

Второй вариант с затуханием сверху вниз:
  1. .items-text {
  2. 	overflow: hidden;
  3. 	position: relative;
  4. 	height: 62px;
  5. }
  6. .items-text:after {
  7. 	content: "";
  8. 	text-align: right;
  9. 	position: absolute;
  10. 	bottom: 0;
  11. 	right: 0;
  12. 	left: 0;
  13. 	height: 1.2em;
  14. 	background: linear-gradient(to bottom, rgba(255, 255, 255, 0), white 100%);
  15. 	pointer-events: none;
  16. }

Если используется фоновое изображение, то подойдёт вариант с использованием background-clip: text – наложение изображения или градиента на текст.
  1. .items-text {
  2. 	height: 70px;
  3. 	overflow: hidden;
  4. 	color: transparent;
  5. 	-webkit-background-clip: text;
  6. 	background-clip: text;
  7. 	background-image: linear-gradient(to bottom, #000, #000, rgba(0, 0, 0, 0));
  8. }

  18.02.24 / 01:07 | CSS |   63 | 1   0