рони, ваш скрипт для фиксированого количества символов? То есть, если сужать дивы, то количество строк увеличивается.
Столкнулся с такой проблемой, что на тестовом сайте на wordpress-woocommerce не могу найти, как настроить сетку товаров. Из-за разницы в длине названий товаров ценник и кнопка "Добавить в корзину" смещается вниз у элементов с длинным названием и остается на месте у элементов с коротким. Получается очень некрасивая "лесенка":
Единственным выходом выровнять строки с товарами - это установить фиксированную высоту заголовков. К примеру на три строки.
При этом длина заголовков превышающая строки должна обрезаться с появлением трёх точек.
В CSS можно сделать обрезку, применив для класса заголовков витрин такой стиль:
.product_item .product_details h5{
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
Текст адаптивно обрезается, три точки появляются, но к сожалению заголовки в этом случае становятся однострочными.
Такая уж печальная особенность у text-overflow: ellipsis
Сложность ещё в том, что дивы с товаром в витрине имеют относительную ширину заданную в процентах. Поэтому количество видимых знаков в длинных заголовках (если задать фиксированную высоту заголовков) при изменении ширины окна браузера будет меняться. Следовательно обрезка по определённому количеству знаков неэффективна.
Но вот недавно увидел страницу одного солидного интернет-магазина:
http://www.obi.ru/decom/category/%D0...%8B%D0%B5/1064
И на этой странице с товаром заголовки обрезаются как нужно.
То есть они в две строки с тремя точками по обрезке.
И если плавно изменять ширину окна браузера, то количество знаков (буквально по буквам!) в заголовках также меняется. Но две строки с тремя точками сохраняются чётко!
Пытался повторить это у себя на сайте с помощью плагина
jQuery dotdotdot, но у меня с ним в заголовках в витрине товаров ничего не получилось. Хотя на отдельной странице режет нормально.
На всякий случай привожу одну из витрин моего сайта, в которой я пытаюсь подрезать заголовки и тем самым выровнять сетку:
http://innka.info/product-category/u...-pod-makiyazh/
Обратите внимание как гуляют по высоте ценники. Вот это я и пытаюсь выровнять.
Спасибо за возможные ответы.