О правильной обрезке строк и выравнивании блоков по высоте

Итак, мы имеем понятия символа, слова, строки и блока. Вопрос состоит в том, можно ли и как можно управлять:

• количеством символов и слов в строке,
• количеством строк в блоке.

В данной ветке пользователь Kabak не указывает, что вся эта история нужна для блоков с фиксированной шириной в пикселях. С таким условием считать символы в строке и даже количество строк в блоке имеет смысл, хотя и с некоторым ограничением.

Поясню. Ограничение связано с длиной слов и тем, что HTML допускает переносы только по словам. Если они короткие, в строке их поместится много, и они займут практически всю ее длину. Если же допустить наличие человеконенавистничества, переосвидетельствования и высокопревосходительства, то при одинаковом общем количестве символов гарантированно получим бо́льшее количество строк.

Теперь предположим, что речь идет о комментариях, сверстанных блоками фиксированной ширины. Четыре (к примеру) среднестатистических комментария при ограничении в 80 символов легко смогут выдать блоки с разным количеством строк (соответственно и с разной высотой):

• Человеконенавистническое переосвидетельствование вашего высокопревосходительства
• Число жертв нового страшного землетрясения в Марокко уже превысило 2000 человек
• Нет
• Мне все равно

Выглядит это примерно так. Плюс еще один момент: если отсекать “лишнее” с помощью cot_cutstring(), то правильным это будет только условно. Дело в том, что мы физически отрезаем текст, вероятно даже очень релевантный для сайта, и оставляем поисковики решать о каком “маленьком ху…” идет речь. Да, есть “более умная” cot_string_truncate(), которая может отрезать строки с учетом слов. Но тогда см. выше, а релевантные слова все равно уходят "в минус".

Делаем это правильно

Самое главное: нельзя указывать ширину блоков в абсолютных единицах, поскольку есть телефоны, фаблеты, планшеты, ноутбуки, 22-дюймовые мониторы, телевизоры итд итп. Для маленьких экранов блоки выводятся "столбиком", т.е. по одному в ряд. С увеличением рабочей ширины блоки можно выводить по 2, 3 и более в ряд. Поняв, как работают media queries с ограничениями по ширинам, поймешь почему, например, регулировать количество символов в строках не имеет практического смысла.

Теперь определимся по главному вопросу: речь о высоте блоков или о количестве строк в блоке? Начнем с простого.

Выравниваем высоту блоков по высоте

Здесь нам поможет flex-модель. Комментировать особо и нечего. Вот пример #2. Если по каким-то причинам flex не устраивает, можно решить задачу по-старинке, с помощью jQuery-плагина matchHeight. Результат в примере #3.

Теперь самое интересное:

Выравниваем высоту блоков по количеству строк

Начнем с самого простого варианта. Минимальная высота строки – это одна строка. С помощью CSS строку (хотя в нашем случае это скорее параграф) можно ограничить именно одной строкой:

.text-truncate {
 text-overflow: ellipsis;
 white-space: nowrap;
 overflow: hidden;
}

Пример здесь.

Одной строкой можно не ограничиваться:

.limitlines2 {
 display: -webkit-box;
 -webkit-line-clamp: 2;
 -webkit-box-orient: vertical;
 overflow: hidden;
}

Выглядит это примерно так.

Самое важное: CSS-метод работает по всех случаях – это и фиксированная фирина столбца в пикселях и относительная в процентах. В любом варианте у вас будет указанный максимум и ни одной строкой больше. При этом в теле HTML-документа ничего не обрезается. Единственный момент: текст все же должен быть очищен от разметки. Сделать это можно с помощью "родной" функции PHP strip_tags(). Но вы ведь это и так знали?..

Постскриптум

Если все-таки хочется ограничить строку по количеству символов и сделать это по-джедайски, есть и компромиссный вариант:

.tt2 {
 text-overflow: ellipsis;
 white-space: nowrap;
 overflow: hidden;
 display: block;
 width: 100px;
 // width: 75%;
}

Рабочий пример

Пост-постскриптум

Еще немного информации по теме переносов. Если абсолютно необходимо переносить по слогам, это также можно сделать через CSS:

// Вариант 1 (похуже)
.wordbreak {
 word-break: break-all;
}

// Вариант 2 (получше)
.hyphen {
 hyphens: auto;
}

В первом случае перенос будет независимым от слогов и без дефисов, во втором все достаточно правильно с точки зрения грамматики и пунктуации. Пример для тестирования (колонку заузил чтобы словить максимальное количество переносов). Для того, чтобы все заработало, в теге html должен быть указан атрибут lang с правильным значением языка:

<!DOCTYPE html>
<html lang="ru">