не работает justify (CSS)

Рейтинг: 5Ответов: 3Опубликовано: 05.04.2015

Почему не работает text-align:justify;?

Например: 

<div align="justify" style="position:relative; border:solid 1px #FF0000; width:100%; text-align:justify; font: normal 14px 'Arial'; color:#000000; left:0px; top:0px;">

  Кухни спальни прихожие детские шкафы шкафы-купе гостиные винные комнаты
  <br>рабочие кабинеты библиотеки гардеробные комоды тумбы полки
</div>

css
Источник: Stack Overflow на русском

Ответы

▲ 5Принят

По идее, за выравнивание последней строки отвечает text-align-last, но его поддержка браузерами оставляет желать лучшего. Поэтому пока стоит воспользоваться хаком с inline-block'ом из соседнего ответа (правда, его кроссбраузерность я не проверял).

body {
  text-align: justify;
  -moz-text-align-last: justify;
  text-align-last: justify;
}
I just want this to justify..

▲ 3

Задача решается путем добавления псевдоэлемента after

#justify {
    text-align: justify;
    }
#justify:after {
  content: "";
  display: inline-block;
  width: 100%;
}
<div id="justify">
I just want this to justify..
</div>

▲ 1

Боюсь у вас не совсем верное представление об этом свойстве - св-во не растягивает 3 слова на всю ширину строки, оно ВЫРАВНИВАЕТ текст по ширине блока. http://www.w3schools.com/CSSref/playit.asp?filename=playcss_text-align&preval=justify

PS ну с ссылкой ниже вы же не будете спорить? http://www.w3schools.com/CSSref/pr_text_text-align.asp