`width` と `max-width` は CSS のテキストの折り返しとどのように相互作用しますか?

CSS でのテキストの折り返しと幅の制御

CSS では、width プロパティと max-width プロパティによって要素の幅が決まります。要素のコンテンツが複数行に折り返されると、これらのプロパティの動作に矛盾が生じます。

期待される動作:

提供された CSS に基づく:

#tooltip {
  position: absolute;
  width: auto;
  min-width: 50px;
  max-width: 250px;
  padding: 10px;
  background-color: #eee;
  border: 1px solid #aaa;
}

ツールチップの幅がコンテンツに合わせて縮小したり拡大したりすることを期待する人もいるかもしれません。指定された制限。

実際の動作:

ただし、コンテンツが次の行に折り返されると、max-width プロパティが width プロパティをオーバーライドするため、ツールチップの幅は次のようになります。 250ピクセル。これにより、行の最後の単語が比較的長い場合に余分なパディングが表示されます。

動作の理由:

ブラウザは、コンテンツが表示されるまでコンテンツをインラインで表示しようとします。最大許容幅 (この場合は 250px) に達します。コンテンツが最大幅に達しない場合、width: auto ルールにより、コンテンツに合わせてツールヒントを縮小できます。

ただし、コンテンツが折り返されると、ツールヒントの幅は max で指定された 250 ピクセルに設定されます。 -幅。これは、テキストの折り返しによって要素の幅の再計算がトリガーされないためです。ツールヒントの幅は、折り返し後のコンテンツの幅に関係なく、250 ピクセルのままです。

結論:

この動作は、ブラウザがテキストの折り返しを処理する方法に固有のものであり、簡単にカスタマイズできます。したがって、コンテンツをラップする可能性のある幅制限のある要素を操作するときは、この潜在的な美的問題に注意する必要があります。

以上が`width` と `max-width` は CSS のテキストの折り返しとどのように相互作用しますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。