※過去7日の人気記事ランキングを表示しています
« IE6で背景を印刷する | Home | IEで position:absolute した要素が消えるバグ »
2007年01月25日
Webサイトを制作していてたまに指摘されるのが、半角文字を連続して入力したときにレイアウトが崩れるという問題。
これはブラウザがデフォルトでは英単語を単語の途中で改行しないから起きるんだけど、そんなめちゃくちゃ長い単語が入る場合があるんですか？と言いたくもなります。
ただ、ありえるのはURLとかe-mail。
これがサイドの狭いエリアに入ってくる場合。
IEの場合のみCSSで対応できるのでメモしときます。
IEでは、下記のスタイルと組み込むことで対応可能。
word-break: mode (e5)
行末の単語禁則処理を、normal（既定値：英文のみ単語の切れ目で改行）、break-all（英文、和文共に単語の途中でも改行）、keep-all（英文、和文共に単語の切れ目で改行）のいずれかで指定します。
(とほほのスタイルシート入門より)
Firefoxはこれに対応していないため、制作側ではほとんど打つ手なしですね。
ユーザー側では、下記のようなアドオンがあるのでこれをインストールすれば改行するようになりますが。
|
|
|
|
|
|
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)
