Полная выключка по ширине средствами CSS

Нередко при HTML верстке приходится привегать к полному выравниванию параграфа. Как это сделать исключительно при помощи CSS?

Выравнивание текста средствами CSS

Полная выключка текста по ширине в параграфе означает, что последняя строка также выравнивается также. Сразу же поясним, что этот прием является очень спорным в плане типографики. Однако в ряде случаев, когда "Заказчику надо", верстальщику приходится реализовывать и это требование.

Реализация полной выключки по ширине при помощи CSS предельно проста:

.fulljust			{ text-align:justify; }
.fulljust:after		{ content:""; display:inline-block; width:100%; }

Как видим, идея заключается в том, чтобы добавить в разметку пустой псевдоэлемент и заставить браузер "думать", что строка на этом не заканчивается.

Для чего это надо? Пожалуй, наиболее адекватным применением данного трюка является ситуация, при которой два блочных элемента, расположенных друг над другом, и имеющих разные стили, необходимо выравнять по ширине. Например, когда приходится верстать название компании и ее слоган в шапке сайта.

Впрочем, применение полной выключки по ширине может быть разным. Удачи вам в верстке!

 

Заинтересовались? Звоните нам по телефонам +375 (29) 774-35-89 и +375 (44) 774-35-89 в Минске. Мы будем рады помочь Вам в реализации Вашего проекта.

К посту «Полная выключка по ширине средствами CSS» комментариев пока нет

Новый комментарий

Для редактирования комментария осталось 10 минут