CSS line-break property

スタイルシート属性 line-break は、行末の禁則処理を指定します。

禁則処理とは、行の先頭に来ることが望ましくない文字が、行の先頭に来ないように改行位置を調整することです。通常、日本語の文章では句読点や拗音は行の先頭に来ることはありません。

書式

line-break: mode

属性値

mode
行末の禁則処理を指定します。
値意味
auto User 既定の改行規則を使用してテキストを改行する。
loose 最も制約の少ない改行規則でテキストを改行する。一般に、新聞などの短い行に使用される。
normal 最も一般的な改行規則でテキストを改行する。
strict 最も厳しい改行規則でテキストを改行する。
anywhere 改行に対するあらゆる禁止を無視する。

使用例

次にスタイルシート属性 line-break を使用したHTMLの例を示します。

<p style="line-break: auto;">
  私はその様子を見て、
  「各々皆、並々ならぬ努力をしているのだなぁ」と思った。
</p>

私はその様子を見て、「各々皆、並々ならぬ努力をしているのだなぁ」と思った。

<p style="line-break: loose;">
  私はその様子を見て、
  「各々皆、並々ならぬ努力をしているのだなぁ」と思った。
</p>

私はその様子を見て、「各々皆、並々ならぬ努力をしているのだなぁ」と思った。

<p style="line-break: normal;">
  私はその様子を見て、
  「各々皆、並々ならぬ努力をしているのだなぁ」と思った。
</p>

私はその様子を見て、「各々皆、並々ならぬ努力をしているのだなぁ」と思った。

<p style="line-break: strict;">
  私はその様子を見て、
  「各々皆、並々ならぬ努力をしているのだなぁ」と思った。
</p>

私はその様子を見て、「各々皆、並々ならぬ努力をしているのだなぁ」と思った。

<p style="line-break: anywhere;">
  私はその様子を見て、
  「各々皆、並々ならぬ努力をしているのだなぁ」と思った。
</p>

私はその様子を見て、「各々皆、並々ならぬ努力をしているのだなぁ」と思った。

word-break

スタイルシート属性 word-break は、行末の改行処理を指定します。

書式

word-break: mode

属性値

mode
行末の改行処理を指定します。
値意味
normal和文は単語の途中でも改行、英文は単語の切れ目で改行（規定値）
break-all単語の途中でも改行
keep-all単語の切れ目で改行

対応状況

Webブラウザ対応状況
Internet Explorer 6.0○
FireFox 3.0×1
Google Chrome 0.3○
Opera 9.62×1
Safari 3.2○

1 常に単語の切れ目で改行する。

使用例と表示サンプル

次にスタイルシート属性 word-break を使用したHTMLの例を示します。

<p style="word-break: break-all; width: 20em">This is HTML 4.01 Strict DTD, which excludes the presentation attributes and elements that W3C expects to phase out as support for style sheets matures. Authors should use the Strict DTD when possible, but may use the Transitional DTD when support for presentation attribute and elements is required.</p>

This is HTML 4.01 Strict DTD, which excludes the presentation attributes and elements that W3C expects to phase out as support for style sheets matures. Authors should use the Strict DTD when possible, but may use the Transitional DTD when support for presentation attribute and elements is required.

<p style="word-break: keep-all; width: 20em">This is HTML 4.01 Strict DTD, which excludes the presentation attributes and elements that W3C expects to phase out as support for style sheets matures. Authors should use the Strict DTD when possible, but may use the Transitional DTD when support for presentation attribute and elements is required.</p>

This is HTML 4.01 Strict DTD, which excludes the presentation attributes and elements that W3C expects to phase out as support for style sheets matures. Authors should use the Strict DTD when possible, but may use the Transitional DTD when support for presentation attribute and elements is required.

white-space

white-spaceは、空白文字及び自動改行の扱いを指定するスタイルシート属性である。

書式

white-space: space

属性値

space
空白、タブ及び改行の扱いを次の値から指定する。
値意味
normal自動改行あり、空白は詰める。(初期値)
pre自動改行なし、空白はそのまま。
nowrap自動改行なし、空白は詰める。
pre-wrap自動改行あり、空白はそのまま。
pre-line連続する空白、タブ及び改行をひとつの空白として表示する。自動改行する。
inherit上位要素のスタイルを継承する。

適用可能要素

すべての要素

使用例

次にスタイルシート属性 white-space の使用例と表示サンプルを示す。表示結果はブラウザによって異なることがある。

<p style="white-space:pre">white    space</p>

white space

<p style="white-space:nowrap">white    space</p>

white space

<p style="white-space: pre-wrap">white   space   white   space   white   space   white   space   white   space   white   space</p>

white space white space white space white space white space white space

参考文献

World Wide Web Consortium (2021) CSS Text Module Level 3

CSSプロパティ

CSSには次のプロパティがある。