文字編
HTML講座テーマ別
☆改行を制御する - クイックガイド
腹減り日誌 - donguri browser 
お腹減ったぞ お腹減ったぞ お腹減ったぞ お腹減ったぞ お腹減ったぞ お腹減ったぞ

お腹減った何かくれ。 お腹減りすぎて倒れそうだぞ。 そんなこんなで腹減り日誌。
 
１． 自動改行の仕組みは？
 
２． 改行を禁止する
 
３． 部分的に改行を許可する
 
自動改行の仕組みは？

意図的に改行するには <br>を使うってのはすでに紹介した通り。 それ以外にもウィンドウの幅だとか その文字を包含する表などの横幅に応じて 自動で改行するようになってるんだ。

半角文字と全角文字ではちょっと動作が違う。 全角文字の場合文字と文字の間なら 文脈や単語の区切れを問わずどこでも改行するのに対して 半角文字の場合は半角スペースや全角文字が出てこない限り 勝手に改行されないという特徴がある。 簡単に言えば英文(半角の場合)は単語単位で改行されるってことだね。

<table border="1" width="10">
 <tr>
  <td>せまいんですけど</td>
 </tr>
</table>
 
<table border="1" width="10">
 <tr>
  <td>hahahahahahahahahaha</td>
 </tr>
</table>

プレビュー♪ - 
せまいんですけど
 
hahahahahahahahahaha
横幅の指定は同じだけど半角だと改行できないので 横幅を押し広げる形だね。 ウィンドウからはみ出した場合はスクロールバーが表示されるよ。

注釈として、全ての半角文字や全角文字で同じことが言えるわけじゃないんだ。 どの文字が例外っかってのはブラウザによっても違ってくる。 この辺を考えるならなるべく多くのブラウザで確認するしかないね。

改行を禁止するには

ここまで紹介した通り一般的に全角文字では どこでも改行されてしまうので 場合によっては改行されたくないのに改行されてしまう場合もある。 そこで今度は改行を制御する方法を紹介。 まずはタグを使う場合。

改行を禁止するタグは<nobr>だよ。

<nobr>〜</nobr>の間の文字は途中で改行されなくなるよ。

■<nobr>での改行禁止−動作確認ブラウザ
 IE6.0   NN4.7   NN7.0   Opera7.0 
−ブラウザ別情報−
NN4.7では<td>の中で<nobr>を使うと 表から文字が飛び出す場合があるよ。

表の中の文字の改行を禁止する場合は <td>に属性をつけることでも可能だよ。

改行を禁止する属性名はnowrapだよ。

属性値はnowrap。 nowrap="nowrap"って感じになるわけだけど、 通常は省略して単純にnowrapと書く。 これを<td>につけることによって そのセル内の改行を禁止する事が出来るよ。 この時に気をつけてほしいのは 同じ<td>にwidth属性がついていると そっちの設定が優先されてしまうよ。

<table border="1" width="10">
 <tr>
  <td nowrap>広げてやるぅ〜〜〜！！</td>
 </tr>
</table>
 
<table border="1">
 <tr>
  <td width="10" nowrap>広がらない</td>
 </tr>
</table>

プレビュー♪ - 
広げてやるぅ〜〜〜！！
 
広がらない
同じ<td>にwidthをつけるとこうなっちゃう。

■nowrapでの改行禁止−動作確認ブラウザ
 IE6.0   NN4.7   NN7.0   Opera7.0 

部分的に改行を許可する

<nobr>を使えば改行を禁止することが出来るけど 長くなり過ぎる場合は『ここでなら改行してもいいかな』ってこともあると思う。 でも<br>を使うと状況に関係なく 強制的に改行されてしまうよね。 あるいは英文と同じように単語単位で自動改行させたいなんてこともあるよね。 そんな時のために改行しないとはみ出してしまう場合のみ、 改行を許可できるタグがあるよ。

単語の区切りを表すタグは<wbr>だよ。

<br>との違いは<br>は強制的に改行するけど <wbr>は状況に応じて改行するってことだよ。 これを<nobr>〜</nobr>の中などで 例外的に改行を許可したい場所に書き込めばいいんだ。 ただブラウザごとに動作が異なることもあるみたい。

<table border="0" width="10">
 <tr>
  <td><nobr>腹減った<wbr>食欲の秋<wbr>１２月</nobr></td>
 </tr>
</table>

プレビュー♪ - 
腹減った食欲の秋１２月

■<nobr>内での改行許可−動作確認ブラウザ
 IE6.0   NN4.7   NN7.0   Opera7.0 

次は<td>にnowrapを付けた中での使用。

<table border="0" width="10">
 <tr>
  <td nowrap>腹減った<wbr>食欲の秋<wbr>１２月</td>
 </tr>
</table>

プレビュー♪ - 
腹減った食欲の秋１２月

■nowrapでの改行許可−動作確認ブラウザ
 IE6.0   NN4.7   NN7.0   Opera7.0 
−ブラウザ別情報−
IE6.0でnowrapのついた<td>内で<wbr>を使うと 収まりきらない部分が欠けてみえる場合がある。

最後に連続した半角文字の場合。

<table border="0" width="10">
 <tr>
  <td>00000<wbr>0000000<wbr>00000</td>
 </tr>
</table>

プレビュー♪ - 
00000000000000000

■半角文字での改行許可−動作確認ブラウザ
 IE6.0   NN4.7   NN7.0   Opera7.0 
−ブラウザ別情報−
Operaで他と同様の動作させたい場合は ソース中の<wbr>の後で改行する。 ただし、その場合他のブラウザで半角スペースが空いてしまう。

と言ったようにどれも一長一短って感じだけど <wbr>に頼らない方法として 単語ごとに<nobr>〜</nobr>で挟むと言うのも１つの手だよ。 これだと動作確認ブラウザでは１通り動作するよ。 (ただし半角文字の場合、Operaでは上と同様の問題あり)

<table border="0" width="10">
 <tr>
  <td><nobr>腹減った</nobr><nobr>食欲の秋</nobr><nobr>１２月</nobr></td>
 </tr>
</table>

プレビュー♪ - 
腹減った食欲の秋１２月

■<nobr>を単語ごとに使った場合−動作確認ブラウザ
 IE6.0   NN4.7   NN7.0   Opera7.0 
 
ウェブ木箱＞HTML講座
Copyright(C) 2003 あう