AIRE-PROJECT BLOG

RecentComments

月別アーカイブ

Link

« IE6で背景を印刷する | Home | IEで position:absolute した要素が消えるバグ »

2007年01月25日

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

CSS

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

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

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

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

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

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

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

MR Tech Link Wrapper

トラックバック

コメントを投稿

最近読んだおすすめ本

恋火

恋火

著:松久淳+田中渉

対岸の彼女

対岸の彼女

著:角田 光代

欅しぐれ (朝日文庫 (や20-1))

欅しぐれ (朝日文庫 (や20-1))

著:山本 一力

覆面作家の夢の家 (角川文庫)

覆面作家の夢の家 (角川文庫)

著:北村 薫

覆面作家の愛の歌 (角川文庫)

覆面作家の愛の歌 (角川文庫)

著:北村 薫

ぼくとひかりと園庭で

ぼくとひかりと園庭で

著:石田 衣良

関連エントリー 【CSS

はてなブックマーク del.icio.us ニフティクリップ livedoor クリップ POOKMARK Airlines Buzzurl(バザール)

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

SCHOOL OF DESIGN(スクール オブ デザイン)

CSS Zen Garden Book―Webデザインのベストプラクティスに学ぶ、CSSクリエイティブ・テクニック (Web Designing BOOKS)

スタイルシート スタイルブック

Web標準の教科書―XHTMLとCSSでつくる“正しい”Webサイト

Webデザインノート No.2 (2007)―Making magazine of web design (2) (SEIBUNDO Mook)

俺流amazonの作り方―Amazon Webサービス最新活用テクニック

SEIBUNDO MOOK Webデザインノート No.1 (SEIBUNDO mook)

Copyright © 2007 Aire-Project All Rights Reserved.