О правильной обрезке строк и выравнивании блоков по высоте
- 861 просмотр
- 27 сентября, 2023
- Обновлено: 17 октября, 2023
- admin
- Время чтения: 4 минуты
![Корректно обрезаем строки средствами CSS](pics/thumbs/22/img-22-966x644-crop.jpg)
Итак, мы имеем понятия символа, слова, строки и блока. Вопрос состоит в том, можно ли и как можно управлять:
- количеством символов и слов в строке,
- количеством строк в блоке.
В данной ветке пользователь 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">
Новый комментарий