連続した半角英数字を改行させる

Read More

HTML+CSSです。


連続した半角英数字を表示しようとすると、枠内でキチンと改行されずにレイアウトが崩れたり、枠からはみ出たりという現象が起ることがあります。


ユーザが入力できるシステムだった場合、こちらが想定もしないような長~い半角英数字を連続して入力することがあり得、結果全てのレイアウトに影響が出てしまいます。


--
そもそもこれはブラウザが、
連続した文字列のどこで文章を折り返して良いかを判断できない為に起こる問題です。


英語では文字列の単語と単語の間に半角スペースが入るので、文字列が1行で表示出来ないとブラウザに判断された場合、文章の意味が壊れないようにこの半角スペース部分で折り返しをしてくれます。


日本語の場合、半角スペースを入れるという文化がありませんが、連続した日本語の文字列は適当な所で自動改行がなされます。

これは単語の区切りを認識することは出来ないものの、日本語は一文字一文字が意味を持つと考えられているから?でしょうか。

正しい理由なんか知らぬわ(´・ω・`)


--
さて、この半角英数字のレイアウト崩れですが
CSSを使うと回避することができます。


その際、注意する点がいくつかあって
まずthタグやtdタグにスタイルを指定しても正しく動作しません。

divタグなら期待した動作をしてくれますので対象の文字列をdivタグで括り、そのタグに対してクラスを指定します。


スタイルシートは以下のようにします。
div.hoge {
  width:50px;
  word-wrap:break-word;
  overflow:auto;
}

一緒にwidthの値を指定しているのは上位のwidthが効かないことがあるからです。

IEでおかしな空白が入ってしまうのでoverflowを指定しています。



Firefox3
Google Chrome5
Internet Explorer6
Internet Explorer7
Internet Explorer8
で期待する動作を確認しました。

--
他にもjQueryのプラグインを使った方法もあるようですが、個人的には止めた方が良いと思っています。

余計な干渉を発生させてしまいかねないからです。


Category "HTML・JS・CSS" の最新記事