CSS の「max-width」プロパティがテキストの折り返し後に余分なパディングを残すのはなぜですか?

行の折り返しと CSS サイズ設定について

CSS では、width プロパティと max-width プロパティによって要素の水平サイズが定義されます。要素の内容が最大幅を超えると、次の行に折り返されます。ただし、提供された例に示すように:

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

コンテンツが次の行に折り返されると、max-width プロパティが width プロパティをオーバーライドし、折り返された行の末尾に過剰なパディングが残るように見えます。

通常の動作の説明

この動作は確かに正常です。ブラウザは、許容される最大幅に達するまで、要素内にテキストをインラインで流し込もうとします。最初の行に収まらない場合は、折り返して後続の行に続きます。

ただし、折り返した後、テキストに合わせてボックスが再び縮小することはありません。これは、テキストの折り返しではそのような動作が許可されていないためです。ボックスの幅は最大幅の値 (この場合は 250px) として計算され、折り返されたテキストのサイズには基づいていません。

考えられる解決策

残念ながら、この動作を変更する既知の CSS ソリューションはありません。ブラウザは、テキストの折り返しの固有の性質により、このように機能します。

以上がCSS の「max-width」プロパティがテキストの折り返し後に余分なパディングを残すのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。