新しくブログを開設しました。

Webエンジニアがデザイナーになってみる。


上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

新しくブログを開設しました。

Webエンジニアがデザイナーになってみる。


今更な問題ですが、以前から気になっていました。

例えばCSSで



この「 divTesxtクラス 」領域に文字列を表示した場合

300pxを超えた文字列については改行されるはず

・・・ですが

半角英数字のみの文字列の場合

日本語(2バイト文字)と違ってdivタグ等でwidth指定した幅を超えても改行しないではみ出す問題がHTMLには存在します。

原因は、半角英数文字列は、スペース等の区切りが入るまで1つの単語として認識されるためです。

これのため、Webサイトのレイアウトが崩れてしまうブログやサイトが多々あります。

対処方法は以下のとおりです。


IEの場合のみCSSで対処できます

word-break

normal:半角英数字のみ単語の切れ目で改行する
break-all:半角英数字、日本語共に単語の途中でも改行する
keep-all:半角英数字、日本語共に単語の切れ目で改行する

その他ブラウザについては現状では対処することができません。

もし対処したい場合はPHP等である一定文字数に達したら改行するようなロジックが必要となります。
スポンサーサイト

テーマ:ホームページの作り方 - ジャンル:コンピュータ

<<ライフレシピ共有サイト nanapi[ナナピ] | ホーム | 人は死ぬ時にどう感じるのだろうか>>

コメント

コメントの投稿


管理者にだけ表示を許可する

トラックバック

トラックバック URL
http://kanamehackday.blog17.fc2.com/tb.php/219-9cd6d02a
この記事にトラックバックする(FC2ブログユーザー)
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。