Всем привет,
Выводя список элементов, каждый блок имеет прописанные высоту и ширину.
Но как лучше сделать, если на некоторых элементах заголовок и подзаголовок очень длины и налазят на следующую строчку:
http://www.codeply.com/go/b4Fji2v7f8
Есть какое-либо удобное решение кроме добавить ширины ?
  Спасибо !

Вариантов можно придумать 
- можно сделать заголовку overflow:hidden и снизу пририсовать градиентную (от прозрачного к белому) тень. Так получится, что лишний текст "скрывается в тумане". Чтобы прочитать текст таки можно было - его нужно продублировать в атрибуте title. Или при наведении менять overfow, чтобы заголовок читался.

- Где - то тут пролетал скрипт динамической обрезки длинного текста. Основной смысл - текст уменьшается побуквенно, пока не влезет в требуемый размер. Алгоритм немножко простоват, по этому работает медленно на элементах с длинным текстом, но на коротких все достаточно шустро.  

Это сообщение отредактировал(а) ksnk - 7.7.2016, 11:10

C overflow:hidden и title понятно - работает
Если рисовать градиентную тень - то она будет видна для всех элементов, что не очень удобно.
Видимо, нет возможности отображать какой-то элемент(картинка наведя мышкой выводит полный текст), когда срабатывает overflow:hidden ?

А можно ли посчитать с помощью JS  что часть текста прячется и отображать картинку для просмотра всего текста?
Я имею в виду, картинку для просмотра всего текста видна, если часть текста спрятанна...

Да, свойство scrollHeight у элемента. Его нужно сравнить с height 

 Спасибо, в целом получилось, но:
1) Проверяя высоту элементов я получил что

    ...
не знаю, может там в верстке косяки ?
2) Картинку, что текст заголовка отображается не весь, я разместил слева от самого заголовка : иначе эту картинку не видно.
Хотя наверно лучше было бы отобразить ее справа...
Посмотрите, пожалуйста http://dev4.softreactor.com/ под заголовком "Spotlight Hostels " - может у вас будут лучшие идеи...

scrollHeight - это реальная высота занимаемая элементом. Для одной строчки она будет равна lineHeight выбранного в элементе шрифта.
Возможно, для гарантии однострочности элемента будет правильнее сравнивать именно с .css('lineHeight') 

Картинку, наверное, лучше сделать из 3-х точек, основа трех точек совпадает с бякграундом, небольшой просвет слева - градиентная полупрозрачность от прозрачного до непрозрачного. Вероятно, такое не очень нарисовать и на css3.

Если использовать .css('lineHeight'), то не работает вообще :


 это значение равно 22 -  как для строк с коротким текстом, так и для длинных строк, часть которй спрятанна.

 А можно ли примерчик картинки 3-х точек или ссылдку как это делать ?

if(div_el[0].scrollHeight > parseInt(div_el.css('lineHeight'))) { ...

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

Спасибо!

Это условие срабатывает и для коротких строк :

Но нормально срабатывает такое условие :


И нет ли примерчика картинки 3-х точек ?