CSS を使用してテキストを引き伸ばして Div の幅を満たすにはどうすればよいですか?

Div の幅を占めるようにテキストをストレッチする

div が一貫した幅を維持しているものの、さまざまな量のテキストを含めることができる状況では、この課題は次のとおりです。問題が発生します: div を最適に埋めるために文字の間隔を配分するにはどうすればよいですか?

幸いなことに、この偉業は、CSS プロパティの戦略的な組み合わせと賢いハックによって可能になります。

解決策:

1. text-align:justify; を適用します。 div に追加します: これにより、割り当てられたスペースの左側と右側の両方にテキストが均等に配置されます。
2. span 要素を組み込みます: div と並べて span タグを実装します。インラインブロック表示を使用して、幅を 100%、高さを 1em に設定します。これはテキストの下部の「スペーサー」として機能します。

コード例:

div {
  background-color: gold;
  text-align: justify;
}

span {
  background-color: red;
  width: 100%;
  height: 1em;
  display: inline-block;
}

<div>
  Lorem ipsum sit dolor
  <span></span>
</div>

この戦略はテキストを強制します。文字間隔を維持しながら div の幅全体に拡張し、視覚的にバランスのとれた効果を生み出します。

以上がCSS を使用してテキストを引き伸ばして Div の幅を満たすにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。