と普通の半角スペースの違い
HTMLの文字参照「 」は、半角スペースとしてレンダリングされますが、その前後で改行されません。
- 「nbsp」は「no-break space,non-breaking space」で「スペースの前および後の位置での自動的な改行(行の折り返し)を防ぐ特殊なスペース」です。(→Wikipedia-ノーブレークスペースより)
- HTMLで文字列が表示範囲内に収まらない場合、英文であれば半角スペース等で自動的に改行がなされますが、「 」の前後では抑制されます。
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <style> div.w100 { width: 100px; border: 1px solid #AAAAAA; margin: 10px; } div.title { margin-top: 20px; } </style> </head> <body> <!-- を使った半角スペース。横幅が足りない場合も途中で改行されない。 --> <div class="title">■ を使った半角スペース</div> <div class="w100"> aa aa aa aa aa aa aa aa aa aa aa </div> <!-- 普通の半角スペース。横幅が足りない場合、途中で改行される。 --> <div class="title">■普通の半角スペース</div> <div class="w100"> aa aa aa aa aa aa aa aa aa aa aa </div> <!--まぁ、white-space:nowrap でもいいんだけど。 --> <div class="title">■white-space:nowrap</div> <div class="w100" style="white-space:nowrap;"> aa aa aa aa aa aa aa aa aa aa aa </div> <!-- ちなみにwhite-spaceの指定で整形済みテキスト(pre)の真似もできる。 --> <div class="title">■white-space:pre</div> <div class="w100" style="white-space:pre;"> aa aa aa aa aa aa aa aa aa aa aa </div> </body> </html>