x
 
bolonia
28 марта 2013

Необходимо сделать text-align: justify, но чтобы последняя строка центрировалась, как с text-align: center. Текст может меняться.

Подскажите, как реализовать такое?



В ЦСС3 выравнивание текста в последней строке задаётся свойством text-align-last. Стиль вашего абзаца:

p {
  text-align: justify;
  -moz-text-align-last: center;
  text-align-last: center;
}

Сейчас код работает только в ФФ и ИЕ.

В остальных браузерах придётся или отказаться от оригинального приёма, или написать яваскриптовую замену. Я бы выбрал первое — мне кажется, подобные изыски не стоят и десяти строк скрипта.

Спецификация

P. S.
Это был совет о разработке веб-интерфейсов. Хотите узнать всё об умной вёрстке, правильных скриптах, грациозной деградации, трюках и работе технолога с дизайнером? Присылайте вопросы.

Поделиться
Отправить

Комментарии

Виталий Кузнецов
28 марта 2013

Я вообще не считаю этот приём уместным.

Как-то он не логично выглядит, надо всё по центру выравнивать и чтобы смотрелось ёмко — заниматься редактурой текста, чтоб подходил по размерам.

Дмитрий Шишкин
28 марта 2013

Виталий, редактура не выход. Можно написать текст для одного размера монитора, но для других обязательно съедет.

Один из вариантов решения проблемы — писать в две колонки.

Виталий Кузнецов
29 марта 2013

Две колонки — хороший выход, если много текста и не надо делать длинную страницу. Кстати, как такое верстать в N произвольных колонок при растягивании блока?

P. S. Вставьте нормальный текст и будет уже совсем по-другому смотреться и восприниматься. Lorem ispum — моветон.


Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами.

Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры. Мы ожидаем, что такие комментарии составят около 20% от общего числа.

Решение о публикации принимается один раз; мы не имеем возможности комментировать или пересматривать свое решение, хотя оно может быть ошибочно. Уже опубликованные комментарии могут быть удалены через некоторое время, если без них обсуждение не становится менее ценным или интересным.

Вот такой веб 2.0.

EM или REM? 6 Можно ли достичь эффекта переливания без встраивания видео на сайт? 1




Недавно всплыло

Как вы проверяете соответствие вёрстки макету 2 1 3 3