userContent.css でハマる

  • 1 行あたりの文字数がやたら多い行を内部に持つブロック要素
  • overflow プロパティの値が visible であるブロック要素
  • white-space プロパティの値が pre または nowrap であるブロック要素

上記の要件を満たす要素では，その内部のテキストが当該要素のブロックボックス領域からはみ出て表示され得る (はず．きちんと確認したわけではない)．

こんな読みにくいったらありゃしない表示がなされる典型的な例が，当該プロパティの値が特に設定されていない (= 既定値のままの) pre 要素．なもんだから，技術的な情報をメモってる Web ページを探し回ってる間は割としょっちゅう目にするわけで，その度にイラッとしていた．言うほど大袈裟なもんじゃないけど．

「だったらユーザスタイルシートで回避すれば良いじゃない．それこそが CSS の真髄じゃない」ってことで，以前 userContent.css に以下のような記述を追加していた． 


pre {
    overflow: auto !important;
}

ところが，これを書き加えてからは view-source ウィンドウでやたら水平スクロールバーが現れまくって気持ち悪い事になってた．めんどいので screenshot は撮ってない．推察するに，1 ページ分のソースを複数の pre 要素で分割して表示しているらしい．何でそんな表示の仕方になってんのかいな．

そんなこんなでつい最近，別経路で DOM Inspector の有用な使い道を知ったんで，さっそく view-source ウィンドウを inspect して見てみた．が，pre 要素は見当たらず．

何なんやろーなーと思いながら適当なキーワードで検索してたら，こちらのページでヒントを得たんで，早速 userContent.css に追記． 


pre {
    overflow: auto !important;
}

#viewsource pre {
    overflow: visible !important;
}

これで意図通り．DOM Inspector で当該 pre 要素が見当たらない件については放置．単にそういう仕様になってるんだろう．