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

このスタイルに基づいて、ツールチップがコンテンツに合わせて縮小または拡大し、50ピクセルまたは250ピクセルに縮小することを期待します。ただし、コンテンツが次の行に折り返されると、max-widthプロパティがwidthプロパティを上書きしているようです。文末の単語が長い場合、それは美的なものであり、たくさんのパディングが残っているように見えます（スクリーンショットを参照）。それは正常な動作ですか？

ここに画像の説明を入力してください

4

2 に答える 2

31

はい、それが通常の動作です。

ブラウザーは、テキストが最大許容幅の 250px に達するまでボックス内にインラインで流し込もうとし、最初の行に収まらないテキストを次の行と後続の行に折り返します。(最大幅に達するのに十分なテキストがない場合は、width: autoその量のテキストに合わせてボックスが縮小されます。)

ただし、テキストの折り返しはそのようには機能しないため、折り返した後にテキストに合わせてボックスが再度縮小されることはありません。これは、ボックスwidthが 250 ピクセルとして計算されることを意味します。これは、 CSS で最大 250 ピクセルに制限されているためです。折り返し後のテキストの幅に等しい小さな値には計算されず、によってオーバーライドされmax-widthます。

この振る舞いを変えるためにできることは何もないと思います。

于 2012-09-11T21:03:14.760 に答える