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

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

HTML-разметка:

<div class="items">
	<div class="items-row">
		<h3>Блок #1</h3>
		<div class="items-text">
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
			Proin blandit magna eu tempus ullamcorper. Sed porta justo 
			sed nibh elementum condimentum.
		</div>
	</div>
	<div class="items-row">
		<h3>Блок #2</h3>
		<div class="items-text">
			Quisque non eros sit amet elit commodo maximus eget a eros. 
			Curabitur malesuada neque eu neque suscipit, sit amet efficitur 
			lorem pharetra. Curabitur et risus eu lacus lacinia convallis.
			Integer faucibus tellus sed congue finibus. Vestibulum eu felis 
			consectetur, blandit libero eu, vulputate neque. Cras et ex a 
			urna aliquam faucibus sed quis elit.
		</div>
	</div>
	<div class="items-row">
		<h3>Блок #3</h3>
		<div class="items-text">
			Etiam eu lorem sit amet mi bibendum auctor. Mauris nec risus 
			a erat rutrum blandit. Vivamus sodales erat sit amet nibh elementum egestas.
		</div>
	</div>
</div>
HTML

Первое что можно сделать, это установить высоту блока, а лишнее скрыть с помощью overflow: hidden.

.items-text {
	height: 62px;
	overflow: hidden;
}
CSS

Результат будет не очень информативный:

15.04.2020
Следующая запись Работа с архивами через SSH

Комментарии

, чтобы добавить комментарий.

Другие публикации

Стили для вложенных нумерованных списков ol
В продолжении темы нумерованных списков ol, пример стилизации и вывода нумерации вложенных элементов.
25.10.2019
1074
0
Contenteditable – текстовый редактор
Если добавить атрибут contenteditable к элементу, его содержимое становится доступно для редактирования пользователю, а...
12.12.2019
5707
+8
Фон под текстом
С фоном у текста есть проблема – у элемента с display: inline при переносах текста не работают отступы (padding) по бокам. Исправить это можно следующими способами.
02.07.2019
12832
+2
Модальные окна на Fancybox 2
Fancybox 2 не только плагин галерей, но и модальных окон, рассмотрим подробнее.
19.09.2019
4336
+3
Стилизация Checkbox
Несколько примеров как изменить внешний вид чекбоксов с помощью CSS, изображений и немного JS.
22.04.2020
2552
+1
Пример парсинга html-страницы на phpQuery
phpQuery – это удобный HTML парсер взявший за основу селекторы, фильтры и методы jQuery, которые позволяют...
18.03.2020
4109
+2