white-space

要素内の空白や改行の取り扱い方法を指定します。


ブラウザ

IE5.5 / IE6 / N4 / N6 / N7 / O6 / O7 / O9 / Fx1 / Fx2 / IE5 mac

▲PageTop

書式

要素[.class名][#id名]{ white-space : 値; }

▲PageTop

指定できる値

値 初期値 意味
normal ○ 要素の最大幅に達すると、折り返します。半角空白や改行は、1つの半角空白に置き換えられます。
nowrap 要素の最大幅に達しても、折り返さずに表示します。
pre 要素の最大幅に達しても、折り返さずに表示します。半角空白や改行は、そのまま表示します。
※InternetExplorerの場合、互換モードでは機能しないようです。
inherit 親要素の値を継承します。

▲PageTop

サンプル

ソースコード

<html>
  <head>
    <title>サンプルコード</title>
    <style type="text/css">
      #sample1 {
        white-space : normal;
      }
      #sample2 {
        white-space : nowrap;
      }
      #sample3 {
        white-space : pre;
      }
      #sample div {
        width : 250px;
        border : solid #999999 1px;
      }
    </style>
  </head>
  <body>
    <div id="sample">
      【white-space : normal】
      <div id="sample1">
        要素の最大幅に達すると、折り返します。半角空白や改行は、1つの半角空白に置き換えられます。
      </div>
      <br>
      【white-space : nowrap】
      <div id="sample2">
        要素の最大幅に達しても、折り返さずに表示します。
      </div>
      <br>
      【white-space : pre】
      <div id="sample3">
        要素の最大幅に達しても、折り返さずに表示します。半角空白や改行は、そのまま表示します。
        ※InternetExplorerの場合、互換モードでは機能しないようです。
      </div>
    </div>
  </body>
</html>

表示結果

【white-space : normal】
要素の最大幅に達すると、折り返します。半角空白や改行は、1つの半角空白に置き換えられます。

【white-space : nowrap】
要素の最大幅に達しても、折り返さずに表示します。

【white-space : pre】
要素の最大幅に達しても、折り返さずに表示します。半角空白や改行は、そのまま表示します。 ※InternetExplorerの場合、互換モードでは機能しないようです。

▲PageTop

関連項目

HTML

<nobr> / <pre> / <wbr>

▲PageTop

▲