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