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

Webサイトを制作していてたまに指摘されるのが、半角文字を連続して入力した
ときにレイアウトが崩れるという問題。
これはブラウザがデフォルトでは英単語を単語の途中で改行しないことで起きます。

例えば、サイドの狭いエリアに入ってくるURLとかe-mail。

IEの場合のみCSSで対応できます。

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

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

(とほほのスタイルシート入門より)

Firefoxはこれに対応していないです。
ユーザー側では、アドオンをインストールすれば改行するようになります。
FireFoxリンクをクリックしたときに表示されるボーダーを消す

a:active { outline: none; }
a:focus { -moz-outline-style: none; }

Webディレクター「otomigus」がWeb制作に関するのメッセージや情報を配信します。Web制作ディレクター「otomigus」からWebサイト制作に関する色々なTipsを紹介します。
Web制作で役立つ情報!、Web制作で役立ちそうもない情報!、SEO対策情報、コーディング情報、Webを制作する際に起きたくだらない小話、Web制作での苦労話などなどWeb制作の情報だけでなく色んな情報を載せていきたいと思ってます。

[PR]登録済みドメインでも手に入る「お名前.com プレミアムドメイン」

「未来を創造するデザイン」「世界に広がるデザイン」
「夢中になれるデザイン」「分かりやすいデザイン」
「結果を出せるデザイン」「ビジネスサイトに強いデザイン」
「ECサイトに強いデザイン」「優しいデザイン」
「力強いデザイン」様々なデザインを提供しております。
Web制作・Webデザイン・Webシステム開発のことなら「N’Design

[PR]登録済みドメインでも手に入る「お名前.com プレミアムドメイン」

バナー

ドメイン検索
a
.com .net .info .mobi

カレンダー

2018年11月
« 10月    
 1234
567891011
12131415161718
19202122232425
2627282930  

アーカイブ

バナー