2011-01-30 18 views
21

私はちょうど面白い何かに気づいた。のは、私はHTMLのリストを持っているとしましょう:CSSのオーバーフロー:隠されたリストの弾丸が隠されていますか?

<ol> 
    <li>Lorem</li> 
    <li>ipsum</li> 
    <li>dolor</li> 
    <li>sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies. Curabitur et ligula.</li> 
</ol> 

そして、このCSS:予想通り、それは、コンテナの幅オフになったときの最後の項目で

li { 
    white-space: nowrap; 
    overflow: hidden; 
} 

長いテキストが実際にオフにハッキングされています。しかし!リスト項目番号はoverflowプロパティの影響を受けますので、表示されません。

しかし、このようにCSSを変更:(テキストは、コンテナの外に行くことはありませんが、リスト項目が示されている)ことを意図し

ol { 
    overflow: hidden; 
} 
li { 
    white-space: nowrap; 
} 

作品として。少なくともこれはFirefox 4 beta10でも当てはまります。

overflowの影響を受けている番号付けが少し不合理だとは思わないのですか?なぜそれが起こるだろうか?それはintendeの動作ですか?仕様になっているのですか、それとも誰かが忘れてしまったことですか?

+0

これはすべての4 beta10の動作ですか?あるいは、他のブラウザでもテストしましたか? –

+0

いいえ、私は本当にこれを修正する気にしないので、私はテストしませんでした( 'olに'オーバーフローを設定すると、トリック、私はちょうど好奇心です) – mingos

答えて

34

これは、限り - 私として認識してデフォルトの動作です。少なくともFirefoxでは以前のバージョンでそれを見るのを覚えています。

+12

Aha!いいです!私はちょうどそれを確認したし、実際に 'list-style-position:inside'は' li'の中に弾丸を表示し、もう 'overflow'の影響を受けません。私は似たようなものを疑ったが、確信が持てなかった。ありがとうございました。 – mingos

0

ulの左側に十分な埋め込みがない場合、私の弾丸/数字がクリップされるのを見たことがあります。ビットを追加して、それが役立つかどうか確認してください。

+0

本当に。私の場合、40pxのパディングがあります。弾丸は完全に 'ol'のパディングの内側にあります。私はそれが 'li'要素のいくつかの奇妙な動作(私は彼らの弾丸が実際の' li'の外にレンダリングされると思う)ともっと関係があると思います...私はちょうど私の質問に答えましたか? – mingos

+0

並べ替えリストスタイルの位置を確認してください –

1

ブラウザは、デフォルトのマージンとパディングをリストに追加します。最初にreset.cssを使用して、予期せぬ動作をすることなくきれいにして新鮮な状態にすることができるように、デフォルトスタイルを削除してみてください。エリックマイヤーのリセットを探してください。それが役に立てば幸い。 list-positionは、olドント・ショーのulと数字の弾丸outsideある場合

+0

私はすでにリセットを使用していますが、それでもなお感謝しています:)。 – mingos

関連する問題