Text- align justify not working

Я пытаюсь оправдать текст в этом теге p, чтобы он отлично соответствовал ширине p.

<p align="justify" style="text-align: justify !important; color:#fff; margin:0px; font-weight:bold; width:487px; border:Solid 1px red;">blah blah blah</p>

но текст просто не оправдает! любая идея почему?

спасибо за любую помощь.

Ответ 1

Вы можете использовать описанное здесь решение: http://blog.vjeux.com/2011/css/css-one-line-justify.html

Это оправдывает одну строку, но после этого добавляет пробел, поэтому, если вы знаете высоту, вы можете указать ее с помощью overflow:hidden, чтобы скрыть ее и получить оправдание.

.fulljustify {
    	text-align:justify;
    }
    .fulljustify:after {
        content: "";
        display: inline-block;
        width: 100%;	
    }
    #tagline {
        height: 80px;
        overflow: hidden;
        line-height: 80px; /* vert-center */
    }

<p id="tagline" class="fulljustify">Blah blah blah</p>

Ответ 2

Если ваш текст не охватывает более одной строки, оправдание ничего не делает. Ваш текст должен быть перенесен на следующую строку, а затем строка FIRST будет оправдана, но не вторая.

Ответ 3

Если вы хотите оправдать четыре слова в 487px, вы можете попробовать использовать word-spacing в своем css.

Я использовал word-spacing:8em; для bla bla bla bla, но вы могли бы при необходимости настроить.

http://jsfiddle.net/5RpQr/1/

Ответ 4

Chrome не поддерживает его, но в Firefox и IE вы можете использовать text-align-last: justify;. Для решения браузера cross- мы должны использовать то, что опубликовано @onemanarmy;)

Ответ 5

попробуйте это

для div

div {
text-align:justify;
text-justify: inter-word;
text-align-last:center;
/* for IE9 */
-ms-text-align-last:center;
}

Ответ 6

Существует также нечто похожее, например display: flex; justify- содержимое: space- вокруг; если вы обернете эти тексты в промежутки или divs

Ответ 7

Просто используйте style="text-align:justify".
Он работает во всех браузерах.

Ответ 8

Лучше попробуйте

style="text-align:justifty;display:inline-block;"