初心者のHTML5自習室（番外編）
BOXとTEXTの関係
テキストのサンプルを［texttext〜（中略）text］というように、半角英字を入力して、レイアウトを確認してしまうことはありませんか？
そのように入力してしまうと、リスト（UL）を使っても、別リストで使った定義リスト(DL)を使っても、ただのDIVを使っても、用意したワイドを無視して、突き抜けてしまいます。
もちろん、自動改行の禁止タグなんて使わずして、です。
これはcssでword-break:break-allを指定することで、改行の指定ができるようになります。これは、単語の途中であっても、改行してしまうというもの。
ちなみに、IE限定で禁則処理の拡張機能があって、そのタグline-breakとは多少意味合いが違います。こちらは、IE以外は標準で禁則処理を行っているという前提がある中での、normal（通常の禁則処理を行う）、strict（より厳密な禁則処理を行う）という選択肢なのです。
でも、ちょっと待ってください。
どうして、こんなことが起こったのかを考えてみましょう。
実はコレ、日本語、つまり2バイト文字を用いてのテキスト表現であれば、影響を受けない問題なのです。
想像つきました？
さらにヒントです。1バイト文字である半角英数字であっても、適当にスペースを入れておくと、同じように問題は起こりません。
そうです。これは、通常の禁則処理が行われていたということなのです。
英語で文章を作る場合、単語ごとにスペースを入れます。
日本語の場合は、漢字もひらがなもカタカナもありますが、禁則処理としては「を」や句読点、句点などが文頭になることがないようにするというルールがあります。
これで、英語のように単語間のスペースを感じ取り、単語の途中で改行せず、適当なところで改行するというルールと同じレベルの禁則処理ができます。
うっかりしていた管理人のように、ボックスどころかブラウザを突き抜けて、ガンダーラに向かったテキストの心を変えようとしてあれやこれや試して途方に暮れることにならないでくださいね。
「単語だとわかるように、改行なんぞ入れない！」そんな親切心から生まれたはずの禁則処理で、決して、悪意の誘拐というものではないので、気づいたときの疲れが数倍に膨れ上がります。
ちなみに、文章ではなくデザインとして表現したいのであれば、前述のように単語を壊して、かつ、はみ出した部分は、CSSでoverflow:hidden;と記述して、逃亡者を隠すと思い通りに表現できるようです。