CSS の「width」と「max-width」はテキストの折り返しとどのように関係しますか?

行折り返しの CSS 幅と最大幅: 動作を理解する

CSS を使用して要素の幅を定義する場合、幅と最大幅は幅のプロパティは重要な役割を果たします。 width は要素の正確な幅を設定しますが、max-width は最大許容幅を指定します。ただし、要素内でテキストが折り返される場合、これらのプロパティの動作は予期しないものになる可能性があります。

次の CSS コードを考えてみましょう:

提供されたコードによると、期待されるのは次のとおりです。ツールヒントの幅はコンテンツに基づいて動的に調整され、最小幅は 50 ピクセル、最大幅は 250 ピクセルになります。ただし、ツールチップ内のテキストが新しい行に折り返されると、max-width プロパティが width プロパティをオーバーライドし、ツールチップに過剰なパディングが残る見栄えの悪い外観になることが観察されています。

この動作は次のとおりです。確かに普通です。ブラウザは、最大幅の 250 ピクセルに達するまで、テキストをボックス内にインラインで流し込もうとします。この制限に達すると、残りのテキストは次の行に折り返されます。ただし、ボックスの幅は、テキストの折り返し後に再び縮小することはありません。これは、テキストの折り返しの意図した動作の一部ではないためです。

その結果、ボックスの幅は、CSS 仕様で 250 ピクセルを超えることはできないと規定されているため、250 ピクセルとして計算されます。その値。折り返し後のテキストの幅と等しくなるように計算されず、max-width でオーバーライドされます。

残念ながら、この動作を変更する既知の回避策はありません。

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