Цитата(mstdmstd @ 7.7.2016, 13:53  ) |
| А можно ли посчитать с помощью JS что часть текста прячется |
Да, свойство scrollHeight у элемента. Его нужно сравнить с height
| Код |
|
| Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате |
| Форум программистов > Вёрстка веб-сайтов > На некоторых элементах заголовок и подзаголовок о |
| Автор: mstdmstd 7.7.2016, 10:21 |
| Всем привет, Выводя список элементов, каждый блок имеет прописанные высоту и ширину. Но как лучше сделать, если на некоторых элементах заголовок и подзаголовок очень длины и налазят на следующую строчку: http://www.codeply.com/go/b4Fji2v7f8 Есть какое-либо удобное решение кроме добавить ширины ? Спасибо ! |
| Автор: ksnk 7.7.2016, 11:08 |
| Вариантов можно придумать - можно сделать заголовку overflow:hidden и снизу пририсовать градиентную (от прозрачного к белому) тень. Так получится, что лишний текст "скрывается в тумане". Чтобы прочитать текст таки можно было - его нужно продублировать в атрибуте title. Или при наведении менять overfow, чтобы заголовок читался. - Где - то http://forum.vingrad.ru/forum/topic-387805.html пролетал скрипт динамической обрезки длинного текста. Основной смысл - текст уменьшается побуквенно, пока не влезет в требуемый размер. Алгоритм немножко простоват, по этому работает медленно на элементах с длинным текстом, но на коротких все достаточно шустро. |
| Автор: mstdmstd 7.7.2016, 13:53 |
| C overflow:hidden и title понятно - работает Если рисовать градиентную тень - то она будет видна для всех элементов, что не очень удобно. Видимо, нет возможности отображать какой-то элемент(картинка наведя мышкой выводит полный текст), когда срабатывает overflow:hidden ? А можно ли посчитать с помощью JS что часть текста прячется и отображать картинку для просмотра всего текста? Я имею в виду, картинку для просмотра всего текста видна, если часть текста спрятанна... |
| Автор: ksnk 7.7.2016, 15:18 | ||||
Да, свойство scrollHeight у элемента. Его нужно сравнить с height
|
| Автор: mstdmstd 9.7.2016, 13:36 | ||
| Спасибо, в целом получилось, но: 1) Проверяя высоту элементов я получил что
... не знаю, может там в верстке косяки ? 2) Картинку, что текст заголовка отображается не весь, я разместил слева от самого заголовка : иначе эту картинку не видно. Хотя наверно лучше было бы отобразить ее справа... Посмотрите, пожалуйста http://dev4.softreactor.com/ под заголовком "Spotlight Hostels " - может у вас будут лучшие идеи... |
| Автор: ksnk 9.7.2016, 23:31 | ||
scrollHeight - это реальная высота занимаемая элементом. Для одной строчки она будет равна lineHeight выбранного в элементе шрифта.
Возможно, для гарантии однострочности элемента будет правильнее сравнивать именно с .css('lineHeight') Картинку, наверное, лучше сделать из 3-х точек, основа трех точек совпадает с бякграундом, небольшой просвет слева - градиентная полупрозрачность от прозрачного до непрозрачного. Вероятно, такое не очень нарисовать и на css3. |
| Автор: mstdmstd 10.7.2016, 09:34 | ||
Если использовать .css('lineHeight'), то не работает вообще :
это значение равно 22 - как для строк с коротким текстом, так и для длинных строк, часть которй спрятанна. А можно ли примерчик картинки 3-х точек или ссылдку как это делать ? |
| Автор: ksnk 10.7.2016, 10:54 |
| if(div_el[0].scrollHeight > parseInt(div_el.css('lineHeight'))) { ... Это будет признаком того, что элемент занимает больше одной строки, хотя выглядит громоздко. |
| Автор: mstdmstd 10.7.2016, 14:02 | ||||
| Спасибо! Это условие срабатывает и для коротких строк :
Но нормально срабатывает такое условие :
И нет ли примерчика картинки 3-х точек ? |