Div 内の文字間隔は、固定幅を満たすように動的に調整できますか?

Div の幅に合わせて文字の間隔を調整する

問題:

幅が固定された div があり、 div 内のテキストの長さは異なります。テキストの内容に関係なく、常に div を完全に埋めるようにテキスト内の文字間の間隔を動的に調整することは可能ですか?

解決策:

キーこれを実現するには、CSS の text-align プロパティと賢い「ハック」を組み合わせる必要があります。

CSSコード:

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

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

HTML コード:

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

説明:

「テキスト- align: justify" プロパティは、テキストを左右の余白に合わせて揃えます。 「span」要素は、div の幅を (100%) 引き伸ばす透明なオーバーレイです。テキスト コンテンツの後に「スパン」を配置すると、残りのスペースにテキストが強制的に埋められ、文字間の間隔が調整されます。

以上がDiv 内の文字間隔は、固定幅を満たすように動的に調整できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。