Обрезание текста в предпросмотре?

Question

[foof]

Посоветуйте пожалуйста решение такой проблемы: Есть блочный элемент дизайна высотой 117 пикселей, в нём должны уместиться дата, название новости и начала текста новости. Поскольку название статьи может быть написано и в две и в три строки, то просчитать сколько знаков поместиться поле для текста невозможно.

Вопрос: Как бы вы посоветовали обрезать текст?


На некоторых сайтах видел, что конец текст плавно начинает сливаться с фоном.

Answer 1

[adminimus]

>На некоторых сайтах видел, что конец текст плавно начинает сливаться с фоном.

overflow: hidden;
и поверх текста пустить полупрозрачную картинку с градиентом

Comments

[whynot]

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

[Serator]

Под картинкой текст можно выделить, если использовать developer.mozilla.org/en/css/pointer-events (пример: demos.hacks.mozilla.org/openweb/pointer-events/ ). Но все зависит от того, какие браузеры вам нужны :).

+ можно еще и эффекты svg наложить на html — developer.mozilla.org/En/Applying_SVG_effects_to_HTML_content.

Answer 2

[Dmitry Koshelenko]

По обрезке текста была статейка — habrahabr.ru/blogs/css3/91500/

Comments

[Dmitry Koshelenko]

Вот еще интересный метод, может пригодится — apocalypse.ucoz.kz/load/65-1-0-1725

[foof]

Спасибо, работает, только у меня поле многострочное. не понимаю, как переделать для многострочного варианта.

[whynot]

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

[whynot]

Для многострочного варианта — никак, если только писать на js. Например, вычислять ширину каждой буквы (при загрузке страницы создавать любой инлайновый элемент содержащий в себе одну букву алфавита нужного размера, замерять его ширину и потом уже по каждой букве измерять ширину нужного текста и в нужном месте делать перенос строки. Но это изврат — раз (хотя, как-то я писал такое) и два — не очень понятно, что делать при изменении масштаба текста).
Скорее, тут проще переделать дизайн или блок сделать резиновым по высоте.