Троеточие в конце строки средствами CSS

Как же порой раздражают длинные названия ссылок товаров, - по три строчки, - или длинных заголовков иных блоков. Как было бы здорово, если бы можно было все это дело как-то приужать, сделать компактнее. А при наведении мышкой уже показывать title полностью.
Для этого нам на помощь придет наш любимый CSS. Все очень просто, смотрите.
Допустим, у нас есть вот такой блок из каталога с товарами:
Замечательный товар по супер-цене, всего за 100 руб. Скрасит ваши одинокие вечера и даст прилив жизненных сил!
Вот его структура:
<div class="someblock"> <div class="header">Чудо-юдо силопридаватель вечерний, таинственный, арт. 20255-59</div> <p>Замечательный товар по супер-цене, всего за 100 руб. Скрасит ваши одинокие вечера и даст прилив жизненных сил!</p> </div>
Вот его стили:
.someblock{ border: 1px solid #cccccc; margin: 15px auto; padding: 10px; width: 250px; } .header{ border-bottom: 1px dashed; font-size: 16px; font-weight: bold; margin-bottom: 12px; }
Согласитесь, выглядит ужасно. Конечно, можно сократить название товара. Но что делать, если таких сотни или тысячи? Можно также средствами php обрезать часть названия, ограничившись каким-то количеством символов. Но что делать, если потом поменяется верстка и блоки будут меньше или наоборот раза в 2-3 больше? Все это не вариант, все это нам не подходит.
И тут нам на помощь приходит CSS и его волшеблое свойство text-overflow. Но его нужно правильно использовать совместно с несколькими другими свойствами. Ниже я покажу вам готовое решение, после чего объясню что к чему.
Итак, отодвинув в сторону ручное редактирование названий товаров и программную обрезку стилей, мы берем в руки CSS и смотрим, что у нас получится:
Замечательный товар по супер-цене, всего за 100 руб. Скрасит ваши одинокие вечера и даст прилив жизненных сил!
Ну как, лучше? По-моему очень даже! А поднесите мышку к названию... вуаля! Вот оно нам показывается полностью.
В структуре у нас ничего не поменялось, я лишь добавил диву с классом .header тег title. А вот новые, дополненные стили:
.someblock{ border: 1px solid #cccccc; margin: 15px auto; padding: 10px; width: 250px; } .header{ border-bottom: 1px dashed; font-size: 16px; font-weight: bold; margin-bottom: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
Смотрите, что мы сделали:
- Мы добавили блоку свойство white-space: nowrap, которое убирает у текста возможность переноса слов на новую строку, тем самым вытягивая его в линию;
- Затем мы добавили свойство overflow: hidden, которое ограничило видимость нашей строки шириной блока, тем самым обрезая все лишнее и не показывая его посетителю;
- Ну и в конце мы добавили троеточие к нашей строке посредствам свойства text-overflow: ellipsis, тем самым давая посетителю понять, что это не конец строки, и что нужно, наверное, поднести мыщку и посмотреть ее полностью.
Любите CSS, изучайте CSS, и сайтостроительство не покажется вам такой уж сложной вещью =)