html - text-align justify が機能しない

Question

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>

しかし、テキストは正当化しません！理由はありますか？

助けてくれてありがとう。

Answer 1

ここで説明されているソリューションを使用できます: http://blog.vjeux.com/2011/css/css-one-line-justify.html

これにより、1 行が正当化されますが、後にスペースが追加されます。そのため、高さがわかっている場合は、で指定して非表示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>

Answer 2

テキストが複数行にまたがらない場合、両端揃えを行っても何も起こりません。テキストは次の行に折り返す必要があり、最初の行は正当化されますが、2 番目の行は正当化されません。

Answer 3

Chrome ではサポートされていませんが、Firefox と IE では使用できますtext-align-last: justify;。クロスブラウザー ソリューションの場合は、@onemanarmy が投稿したものを使用する必要があります ;)

Answer 4

487pxの 4 つの単語を正当化したい場合word-spacingは、css.

に使用word-spacing:8em;しましbla bla bla blaたが、必要に応じて調整できます。

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

Answer 5

これを試して

分割用

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

Answer 6

を使用するだけstyle="text-align:justify"です。
すべてのブラウザで動作します。