CSS を使用してテキストをコンテナの幅に完全に埋めるにはどうすればよいですか?

コンテナの幅に合わせてテキストをストレッチする

制約された div 内でテキストの美しさを高めることは、一般的な課題です。テキストの内容が異なる場合は、洗練されたバランスのとれた外観を維持することが望ましいです。この記事では、CSS と賢いテクニックの組み合わせを使用して、このシームレスな統合を実現する方法について説明します。

解決策: テキストの位置揃えと微妙なトリック

CSS プロパティtext-align:justify は、div 内のテキストを均等に配置し、左右の余白に沿って配置します。ただし、標準の位置揃えでは、指定された文字間隔が維持されます。本当にぴったりとフィットさせるには、小さなハックで幅 100% の透明なスパンを追加します。

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 を使用してテキストをコンテナの幅に完全に埋めるにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。