TestingPageLayoutWhichContainsExtremelyLongWord

テストページ

  • 極度に長い単語(ワードブレークしない)をタイトルに用い、レイアウトの崩れ具合を調べる(主にサイドバーの)。
  • 極度に長い単語(ワードブレークしない)を本文中に用い、レイアウトの崩れ具合を調べる。

結果

Internet Explorer 6.0 Firefox 1.07 Opera 8.50
サイドバー中の長い単語 ワードブレークしない。 サイドバーの横幅がその分ふくれる。
全体のレイアウトが崩れる。 サイドバーが下に押し出される。
ワードブレークしない。 サイドバーの横幅ふくれず。 長いタイトルがはみ出す。 ワードブレークしない。 サイドバーの横幅ふくれず。 長いタイトルがはみ出す。
本文中の長い単語 ワードブレークしない。 全体のレイアウトが崩れる。 サイドバーが下に押し出される。 ワードブレークしない。 レイアウトは崩れない。 ワードブレークしない。 レイアウトは崩れない。

対策

CSS の div.body と div.sidebar にそれっぽく追加:

div.body {
  ...
  Word-Break: Break-All; /* IE5+ */
  ...
}

div.sidebar {
  ...
  Word-Break: Break-All; /* IE5+ */
  Overflow: Hidden;
  ...
}

IE では強制的な折り返し指定ができる。 IE 以外だと使えないので、サイドバーからはみ出た部分をちょん切ってごまかしてみた。 (強制ワードブレーク指定できんのかなあ)

ここに長い単語置いておきますね

abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz