半角文字の連続を表示させるとレイアウトが崩れる (AIRE-PROJECT BLOG)

カテゴリー

月別アーカイブ

半角文字の連続を表示させるとレイアウトが崩れる

Webサイトを制作していてたまに指摘されるのが、半角文字を連続して入力したときにレイアウトが崩れるという問題。
これはブラウザがデフォルトでは英単語を単語の途中で改行しないから起きるんだけど、そんなめちゃくちゃ長い単語が入る場合があるんですか？と言いたくもなります。

ただ、ありえるのはURLとかe-mail。
これがサイドの狭いエリアに入ってくる場合。

IEの場合のみCSSで対応できるのでメモしときます。

IEでは、下記のスタイルと組み込むことで対応可能。

word-break: mode (e5)
行末の単語禁則処理を、normal（既定値：英文のみ単語の切れ目で改行）、break-all（英文、和文共に単語の途中でも改行）、keep-all（英文、和文共に単語の切れ目で改行）のいずれかで指定します。

Firefoxはこれに対応していないため、制作側ではほとんど打つ手なしですね。
ユーザー側では、下記のようなアドオンがあるのでこれをインストールすれば改行するようになりますが。

トラックバック

「村治佳織」おすすめCD&DVD

AMANDA(DVD付) <村治佳織> 詳細を見る	dulcinea/ドゥルシネア―村治佳織写真集 (ソトコトclassics) 著：村治佳織詳細を見る	アランフェス協奏曲 <村治佳織> 詳細を見る
Mirai~若きマエストロたち~ <オムニバス> 詳細を見る	パストラル <村治佳織> 詳細を見る	音楽を夢見た少年~ロドリーゴ <村治佳織> 詳細を見る

Web制作者におススメの一冊