bauxite:チラシの裏 - TestingPageLayoutWhichContainsExtremelyLongWord

TestingPageLayoutWhichContainsExtremelyLongWord

no archive mode

テストページ

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

!!! 結果

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

!!! 対策

[[CSS]] の div.body と div.sidebar にそれっぽく追加：

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

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

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

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

abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz

Attachment

New:

Edit

TestingPageLayoutWhichContainsExtremelyLongWord

Attachment