Помогите пожалуйста сделать блок с текстом (и не только), который был бы ограничен по высоте, скажем в 3em. Если содержимое не умещается, то должна быть работающая ссылка "Show more" которая бы разворачивала блок во всю нужную высоту. Ссылка должна быть видна только тогда, когда действительно нужна. Я нашел несколько составляющих для решения, но объединить вместе как-то обламываюсь. http://www.sitepoint.com/implementing-show-moreless-functio ... -pure-css/ http://html5hub.com/ellipse-my-text/ (примеры в коментариях) Без доп. разметки видимо не обойтись, а вот без JS кажется можно. Кто сделает, тому спасибо!
Как дети малые! http://jsfiddle.net/nLf0Ltf6/2/ в примере не текст "Show more", а троеточие content: '\2026'; текст помещается в отведенные рамки добиваемся чтобы не помещался Можно увидеть действие в динамике если подвигать влево-вправо разделитель. Это заставит текст меняться в высоту.
крутяк! я даже не понимаю, как это работает. Добавлено спустя 3 минуты 22 секунды: я понял, как он работает. Это оxyительно!
denis01, первая ссылка же ж! Implementing “Show More/Less” Functionality with Pure CSS реально клик переключает состояние [ спрятанного ] чекбокса, а правила CSS используют это состояние чтобы показывать всё/часть. статья расписывает тонкости этого процесса.
Моё мнение не кто не предусматривает? Я же говорил это не возможно. Хотя... Только половину функционала можно сделать на css. Ладно спорить не буду. Делай как знаешь.
http://jsfiddle.net/nLf0Ltf6/305/ пойду запатентую Добавлено спустя 4 минуты 46 секунд: Оставлю это здесь Код (Text): .container { border: 1px red solid; line-height: 1.5; overflow: hidden; max-height: 6.5em; position: relative; } .container:before { content: attr(my-text); } .showMore { position: absolute; right: 0; bottom: 0; background-color: #0f0; display: block; top: 4.5em; width: 100%; } [type="checkbox"]:checked + p { max-height: 100%; } [type="checkbox"]:checked + p>.showMore { top: 9999px; } Код (Text): <input id="eee" type="checkbox"> <p class="container" my-text="But more text here (the same markup structure though): if the text overflows from the clamped paragraph's height, the ellipse will show."> <label for="eee" class="showMore"><nobr>Show more</nobr></label> </p>
Хинт: текст из my-text можно пихнуть прямо в абзац перед showMore, напихать в него тегов с картинками и выкинуть :before из css, но надо учесть, что требуется подгонка положения ShowMore по высоте строк, т.е. по-хорошему все надо мерять в пикселях и высоту картинок делать кратной строкам.
Вася, напильник конечно понадобится, но похоже на решение ) Спасибо! Добавлено спустя 6 минут 7 секунд: Хотя нет, не годится что текст недоступен. Мышой не выделяется, видимо внутри нельзя кликнуть ни ссылок, ни элементов управления. И про размер не всё понял. Полнял только что хрупко.
Примеры по ссылкам заморочили голову этими before и after. Поэтому первая идея была, раз нельзя вставить ссылку в content, то нужно его и текст помнять местами. Использовать before имеет смысл, если нам нужно вставить абстрактный "show more" на одну строку с текстом. Однако это приводит к тому, что сама "show more" может появляться не полностью. Поэтому я разместил её в виде блока на определенной позиции по высоте. То есть по задумке, она должна аккурат перекрывать последнюю допустимую строчку. Дальше текст уходит в оверфлоу, а show more остается в виде последней строчки. Вот чтобы над ней буквы не резались пополам, надо рассчитать все размеры по пикселям, в принципе это возможно =)