タグ

overflowに関するopparaのブックマーク (2)

  • フロートした要素に続くリスト

    通常フロートした要素とデフォルトの文書フローで配置された要素は重なります。CSS 2.1仕様書のフロートの解説にある図Dがその例です。なので、通常フロートした要素に続くリストはそのブレット(や数字等)がフロートした要素の下に隠れてしまいます。この挙動には結構困らされることが多いですが、実はoverflow: autoとすると簡単に回避できます。 Demo: ul after floated element デモのようにリストにoverflow: autoするだけで、キレイにリストが配置されるようになります。overflow: autoを使った場合と使わなかった場合でどう重なりに違いが出るかわかるように、outlineプロパティーでピンクの線を引いておきました。 これはブラウザの挙動がたまたまそうなったということではなく、実にさり気なくCSS 2.1仕様書にも記述があります。 The bor

    フロートした要素に続くリスト
  • Elegant Overflow with CSS Ellipsis

    9/27/2011: As of Today, Firefox 7 supports this text-overflow: ellipsis. Overflow with text is always a big issue, especially in a programmatic environment. There's always only so much space but variable content to add into that space. I was recently working on a table for displaying user information and noticed that longer strings were breaking the table display. The obvious solution was adding a

    Elegant Overflow with CSS Ellipsis
  • 1