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

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

Для этого нам на помощь придет наш любимый CSS. Все очень просто, смотрите.

Допустим, у нас есть вот такой блок из каталога с товарами:

Вот его структура:

	<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 и смотрим, что у нас получится:

Ну как, лучше? По-моему очень даже! А поднесите мышку к названию... вуаля! Вот оно нам показывается полностью.

В структуре у нас ничего не поменялось, я лишь добавил диву с классом .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, и сайтостроительство не покажется вам такой уж сложной вещью =)