HTML - CSS - line-break 行頭禁則処理

 クラウディア
1. 概要
2. 値
3. やってみる

1. 概要

 参考サイトによれば「中国語、日本語、韓国語 (CJK) のテキストで、句読点や記号を用いる際の改行方法を設定します。」とのことで東アジア三国向けに限定の機能のようです。  本項は以下のサイトを参考にさせていただきました。
line-break - CSS: カスケーディングスタイルシート | MDN」
「スタイルシート[CSS]/テキスト・フォント/禁則処理を指定する - TAG index
 前ページの開業禁則処理とあわせて、文章の整形を行います。

2. 値

 明示的に指定する値は4つ

line-break: loose;		←	制限の少ない改行規則
line-break: auto;		←	既定の改行規則?
line-break: normal;		←	一般的な改行規則
line-break: strict;		←	厳格な改行規則

3. やってみる

 やってみます。  これブラウザによっても変わるそうなので・・・わたしは 2018年11月20日現在、「Vivaldi」で試しています。  他のブラウザであれば、わたしの表示したものとは違って見えるかもしれません。  それぞれ

pre.auto(loose, normal, strict)
{
	border: 2px solid green;
	margin-left: 2em;
	line-break: auto(loose, normal, strict);
	width: 5em;
}
 と書いて

<pre class="クラス名">
クラス名
端っこに「」
端っこに丸。
端っこに点、
端っこに小っ
端っこに棒ー
端っこに々々
</pre>
 と記述しております。
loose
端っこに「」
端っこに丸。
端っこに点、
端っこに小っ
端っこに棒ー
端っこに々々
 「Vivaldi」では「loose」でも『」』『。』『、』は、行頭にならないように見えます。
auto
端っこに「」
端っこに丸。
端っこに点、
端っこに小っ
端っこに棒ー
端っこに々々
normal
端っこに「」
端っこに丸。
端っこに点、
端っこに小っ
端っこに棒ー
端っこに々々
 「Vivaldi」では、これだけの例では「auto」も「normal」も同じように見えます。  「々」以外は行頭にならないように見えます。
strict
端っこに「」
端っこに丸。
端っこに点、
端っこに小っ
端っこに棒ー
端っこに々々
 「Vivaldi」では、定義通り、「strict」だとぱっと思いつくものは行頭にならないように見えます。