Для того что бы скрыть текст по количеству строк недостаточно css. Вернее достаточно, но мы не сможем подсчитать количество строк.
1. Надо сделать 2 вложенных блока. внутренний блок тянется и мы через js считаем его высоту. Высота обрамляющего блока фиксирована и сделан overflow для скрытия лишнего.
|
1 2 3 4 5 |
<div class="product_prod_text_out"> <div class="product_prod_text_in"> text высотой в 100 пикселов и (5 строк ) шрифт јриал </div> </div> |
Js измеряет высоту внутреннего блока.
|
1 2 3 4 5 6 7 8 9 |
var product_prod_text_in=jQuery('.product_prod_text_in'); height=product_prod_text_in.height(); if(height<101){ jQuery('.product_prod_text_out').addClass('catalog_text_full'); //скрываем кнопку подробнее- если текст меньше 5 строк jQuery('.catalog_text_more').hide(); } var line_height=20; var count_rov=height/line_height; |
Далее зная высоту блока и Line-height можем производить любые действия.
Line-height 20px . высота блока 100px . т.е если внутренний блок больше 101 пиксела, значит в нем 6 и более строк.
Вот css обрамляющего блока и добавочный класс для для этого же
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
.product_prod_text_out{ display: block; font-size: 14px; line-height: 20px; letter-spacing: 0.02em; margin-bottom: 10px; max-height: 100px; overflow: hidden; } .catalog_text_full{ max-height:1111118px; } |
не работает при изменении размера экрана браузера!
А вы элемент по высоте жёстко прописали? По идее этот код не зависит от высоты экрана браузера.