5

Почему не работает 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>

6 ответов 6

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
  • И как это работает?
    – Unicorn
    9 ноя 2016 в 1:08
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

1
  • проверил работоспособность по ссылке w3schools.com/CSSref/… Что-то FireFox не смог правильно среагировать на text-align:justify (буквы были выровнены по левому краю)
    – I_CaR
    1 фев 2017 в 4:04
0

Зачем использовать align="justify".

Все работает:

http://jsfiddle.net/mrpt15dx/

html

    <div class="border-red">

        Кухни    спальни    прихожие    детские    шкафы    шкафы-купе гостиные    винные комнаты
        рабочие кабинеты    библиотеки     гардеробные      комоды     тумбы      полки
            рабочие кабинеты    библиотеки     гардеробные      комоды     тумбы      полки
            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
        </div>

css


.border-red{
    position:relative; left:0px; top:0px; 
    border:solid 1px #FF0000; 
    width:100%; 
    text-align:justify; 
    font: normal 14px 'Arial'; 
    color:#000000; 
    padding:25px; 
    box-sizing: border-box;    
}
1
  • Неправда! Не работает! Вы просто заполнили текстом всё пространство! см.: jsfiddle.net/mrpt15dx/1
    – I_CaR
    5 апр 2015 в 14:01
0

<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;">

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

-5

Воспользовался
word-spacing:[XX]px;
ХХ - значение на усмотрение, в зависимости от ширины блока.
пример: http://jsfiddle.net/mrpt15dx/7/

2
  • Не понял? За что минусы? За правильный результат?
    – I_CaR
    27 апр 2015 в 19:31
  • За то, что это ужасный способ.
    – Qwertiy
    13 фев 2016 в 21:47

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.