То, что я увидел на сайте яндекса — не совсем то, что в примере. Там полоска одна, а в примере их много, и элементы могут перемещаться по разным «строкам» при растяге.
Если Вы смотрите на примеры — там специально такие дыры, чтобы наглядно показать суть проблемы. Предполагается, что больше чем на 50 пикселей плашки товаров отличаться не будут. А что касается обрезания — это самый топорный способ, и он совершенно никуда не годится.
Попробуйте потом объяснить клиенту, почему у него при вводе названия на 2 строки пропала ссылка «купить». Нельзя ничего обрезать — нужна гибкость.
Ок, проверяем. test.nimax.ru/blocks/em.html — будет несколько алертов, «размер шрифта — размер пробела», рекомендую заглянуть в код — там все говорит за себя. Если что-то будет не так — сообщите, но у меня ровно четверть.
В данном случае — есть внешний div, которому придается все оформление целого блока — padding и все прочее, а также overflow:hidden, чтобы ничего наружу не торчало. Есть внутренний div, которому дается отрицательный margin, чтобы компенсировать зазоры между блоками. У самих блоков зазор выставлен через margin.
Я Вас не совсем понял — пример test.nimax.ru/blocks/ чем не устраивает? Насчет полноты — все файлы доступны, все можно посмотреть. Там CSS вполне прозрачно подключен.
Это, конечно, способ, но фишка в том, что word-spacing можно вернуть к нормальному просто присвоив normal, а вот размер шрифта обратно восстановить не получится, а он должен наследоваться прозрачно.
Вы клиенту попробуйте объяснить, что называть товары можно только короткими строками. Лучше использовать универсальное решение. Тем более, что оно даже без костылей.
Предполагается, что описание везде более-менее одинаковое ±20…30 пикселей, как на скриншоте сайта (если бы там было название в две строки). Резать — не очень хорошо, т.к. в самом низу очень важная кнопка «купить», она обязательно должна отображаться.
Мне кажется, решение без JS лучше.
Да, безусловно. Особенно для CSS, для HTML не так актуально.
Попробуйте потом объяснить клиенту, почему у него при вводе названия на 2 строки пропала ссылка «купить». Нельзя ничего обрезать — нужна гибкость.
div, которому придается все оформление целого блока —paddingи все прочее, а такжеoverflow:hidden, чтобы ничего наружу не торчало. Есть внутреннийdiv, которому дается отрицательныйmargin, чтобы компенсировать зазоры между блоками. У самих блоков зазор выставлен черезmargin.word-spacingможно вернуть к нормальному просто присвоивnormal, а вот размер шрифта обратно восстановить не получится, а он должен наследоваться прозрачно.margin: 0 24px 20px 0;— я смотрю Вы решили с пробелами не заморачиваться ))) те же 4 пикселя