line-break: ***;

ブラウザ
  • IE
プロパティ
  • 独自拡張プロパティ

line-break は、禁則処理を指定するプロパティです。


p {
line-break: strict;
}
プロパティ名 値 説明
line-break normal 標準 （厳密な禁則処理を行わない）
strict 厳密な禁則処理を行う

禁則処理について

文章の読み易さや見た目を整えるために、括弧や句読点などが行頭や行末に来ることを回避するための処理です。

  • 行頭禁則文字の例 … 、 。 ） 」 々
  • 行末禁則文字の例 … （ 「
  • normal を指定した場合でも、ある程度の禁則処理は行われているようです。

strictを指定した場合の変化

実際に検証してみたところ、strict を指定することで次のような変化がありました。

ッ や ぃ などの小さい文字や、ー … などの文字が行頭に来なくなりました（他にもあるかもしれません）。

  • このプロパティは、CSS 2では定義されていません。

使用例


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>文書のタイトル</title>

<style type="text/css">

p {
width: 50%;
border: 1px #808080 solid;
}

p.example1 { line-break: normal; }
p.example2 { line-break: strict; }

</style>

</head>
<body>

<p class="example1">■normal<br>どの文字が禁則処理されるのかを ...</p>

<p class="example2">■strict<br>どの文字が禁則処理されるのかを ...</p>

</body>
</html>
表示例

■normal
どの文字が禁則処理されるのかをテストしてみます。ブラウザの幅を動かすことで、ノーマルと厳密の違いを確認することができます。全角（カッコ）のテスト、半角(カッコ)のテスト。次に「このカッコ」のテスト。ちぃさぃ文字のテストと、のばーーーすテスト。半角!と全角！のビックリマーク。次に"半角"と”全角”のダブルクォーテーション。云々とか我々とかの小さい「々」のテスト。例えば…とか・・・のテスト。最後に\5,000とか￥５，０００とか100%とか１００％のテスト。

■strict
どの文字が禁則処理されるのかをテストしてみます。ブラウザの幅を動かすことで、ノーマルと厳密の違いを確認することができます。全角（カッコ）のテスト、半角(カッコ)のテスト。次に「このカッコ」のテスト。ちぃさぃ文字のテストと、のばーーーすテスト。半角!と全角！のビックリマーク。次に"半角"と”全角”のダブルクォーテーション。云々とか我々とかの小さい「々」のテスト。例えば…とか・・・のテスト。最後に\5,000とか￥５，０００とか100%とか１００％のテスト。