web-dev-qa-db-ja.com

テキストの位置合わせが機能しない

私はこの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>

しかし、テキストは正当化されません！理由は何ですか？

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

htmlcsstext-alignment
28
phil

ここで説明されているソリューションを使用できます。 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>
34
manafire

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

30
Brett

487pxの4つの単語を正当化する場合は、cssでWord-spacingを使用してみてください。

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

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

6
Jason Gennaro

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

6
alijsh

これを試して

div用

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

ディスプレイのような似たようなものもあります：flex; justify-content：スペースアラウンド。これらのテキストをスパンまたはdivでラップする場合

0
WoodyDRN

<p>タグの場合、簡単な方法で動作します：

p {
  text-align: justify;
  text-justify: inter-Word;
}

https://css-tricks.com/almanac/properties/t/text-justify/

0
Navruz