テキストを水平方向に引き伸ばして Div の幅を満たすようにするにはどうすればよいですか?

Div の幅に合わせてテキストを水平方向に拡大する

Web 開発では、特定の div を埋めるためにテキストを水平方向に拡大することが望ましいことがよくあります。幅。ただし、デフォルトでは、テキストは余分なスペースを占有するために引き伸ばされません。

解決策: テキストの位置揃えとインライン要素

この効果を実現するには、CSS テキストを利用できます。 -align:justify とマイナーなハック:

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 を追加し、div 全体にまたがる幅を持つ空の span 要素を追加すると、テキストが強制的に水平方向に伸びて利用可能なスペースを埋めることができます。

この手法により、テキストは長さに関係なく、常に div を完全に埋めることができます。 、視覚的に魅力的なレイアウトを作成します。

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