ブラウザ間で DIV 内のテキストの最後の行を両端揃えにするにはどうすればよいですか?

DIV の最後の行を揃える

元のクエリで生じた論理的な懸念にもかかわらず、テキストを揃える方法を明確にすることができます。 DIV。通常、この終端行は、テキスト位置調整規則に従わずに左揃えになることがよくあります。

これに対処するために、IE6 以降のバージョンを含む複数のブラウザー間で互換性のある包括的なソリューションを紹介します。

クロスブラウザメソッド

このメソッドは 2 つのキーを活用しますテクニック:

text-align-last: justify;: この CSS プロパティは、ブロックレベル要素内のテキストの最後の行を揃えるように特別に設計されています。ただし、これは Internet Explorer でのみサポートされています。

:after Pseudo-Content with Inline-Block:

この手法では、:after 擬似要素を使用して、 DIV の後の非表示の inline-block 要素。次に、この要素は幅 100% になるようにスタイル設定され、事実上 DIV の幅全体を占め、テキストがその全範囲に強制的に揃えられます。

CSS 実装

p, h1 {
   text-align: justify;
   text-align-last: justify;
}

p:after, h1:after {
   content: "";
   display: inline-block;
   width: 100%;
}

単一の処理-Line Text

DIV にテキストが 1 行しか含まれていない場合、追加の CSS ルールが必要です。 :after 疑似要素によって余分な空白行が追加されるのを防ぎます。

h1 {
   text-align: justify;
   text-align-last: justify;
   height: 1em;
   line-height: 1;
}

h1:after {
   content: "";
   display: inline-block;
   width: 100%;
}

追加リソース

この手法の詳細と洞察については、以下を参照してください。

[クロスブラウザ CSS: 最後の行の段落を揃える]テキスト](http://kristinlbradley.wordpress.com/2011/09/15/cross-browser-css-justify-last-line-paragraph-text/)

以上がブラウザ間で DIV 内のテキストの最後の行を両端揃えにするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。