CSS を使用して Div の幅に合わせてテキストのサイズを動的に変更するにはどうすればよいですか?

Div 幅に合わせてテキストのサイズを動的に変更する

テキスト コンテンツが可変で div 幅が固定されるシナリオでは、テキストを揃えて配置します十分ではないかもしれません。完璧にフィットさせるには、文字の間隔を調整する必要があります。

トリックを使用した CSS ソリューション

これを実現するには、text-align:justify と賢いツールの組み合わせを利用します。ハック:

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%、高さ 1em、インラインブロック表示でスパンのスタイルを設定します。
• スパンの幅を 100% に設定して、透明なため、div の残りのスペースを埋めるために展開するコンテナとして機能します。

以上がCSS を使用して Div の幅に合わせてテキストのサイズを動的に変更するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。