ハイドハット

文章の折り返しの仕組み


ハイドハット：トップ＞文章の折り返しの仕組み

文章の折り返しの仕組み
<td>タグに width 属性で幅を指定しているのに、長い文章を書いたときに文章が折り返されず、列の幅が広がってしまう。そんな経験をなさったことはありませんか？それはブラウザの仕様によるものなのです。
nowarp 属性を指定していない場合、ブラウザは列に収まらない文章を単語の切れ目で折り返してくれます。
ところが、この単語の切れ目の判断の仕方が、我々日本人にはなじみのないものなのです。

ブラウザは、半角の文字の連続を１つの単語だと判断します。次の文章「This is a pen.」はスペース（ピンクの部分）で区切られた４つの単語から成り立っていると判断されるわけです。
そしてブラウザは文章の長さがセルの幅を超えてしまったとき、単語の切れ目がなければ、超えたぶんだけセルの幅を広げようとするように出来ています。
全角文字は単語として扱われませんので、日本語の文章を書いているときは関係ないでしょう。しかし半角数字も半角アルファベット同じように判断されますので、例えば料金表などを作ろうとしたときに、これに悩まされることがあるかもしれません。
この場合でも<br>タグを使えば、強制的に改行することができます。

日本語では、スペースを使って文章を区切るということはありません。米国で生まれて発展してきたコンピュータであるがゆえ、こういう仕様になっているのでしょう。
 
仮の料金表を作ってみました。
右の２つの表をご覧ください。両方とも、テーブルの幅は 200px、セルの幅はそれぞれ 40px に指定してあります。
上の表では、金額が 40px を超えてしまっているため、セルの幅が押し広げられ、結果としてテーブル全体の幅まで広がってしまっているのです。
また両方とも、ひらがなと漢字で書かれたメニューの方は折り返されていますね。全角文字はいくつ並べても、単語として扱われることがないからです。
※中華丼は、金額を全角の数字で書いてみました。
  強烈に折り返されてますね（笑）。
  うな丼は<br>タグで強制的に改行してみました。

しかし２万円のかつ丼、さぞンまいでしょうね。うな丼にいたっては６万円です（笑）。
かつ丼 牛丼 親子丼 中華丼 うな丼
20,000 30,000 40,000 ５０，０００ 60,00
0

かつ丼 牛丼 親子丼 中華丼 うな丼
2000 3000 4000 5000 6000
 

ハイドハット：トップ＞文章の折り返しの仕組み