Div 内のテキストの最後の行を両端揃えにするにはどうすればよいですか?

Div の最後の行を両端揃えのテキストに揃える

特定のシナリオでは、div の最後の行を揃える必要があります。両端揃えのテキスト。通常、これは div の標準的な動作ではありませんが、ブラウザ間メソッドを使用してこの目的の効果を実現できます。

実装には text-align-last: justify; の組み合わせが必要です。 :after 疑似コンテンツメソッドのバリエーション。 CSS の組み合わせは、IE6 を含むブラウザーの互換性に適切に対処します。

この方法を適用するには:

CSS:

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

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

注: div にテキストが 1 行しか含まれていない場合、余分な空白行が表示されないように追加の CSS が必要です。表示:

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

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

この手法により、div の最後の行が両端揃えのテキストと確実に揃えられ、さまざまな Web デザインのニーズに合わせてテキストの書式設定がより柔軟になります。

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