| 属性名 | line-break |
|---|---|
| 値 | auto | loose | normal | strict |
| 初期値 | auto |
| 適用可能要素 | すべての要素 |
| 継承 | 継承する |
| メディア | Visual / Text |
| サポート | e5 |
IE5 で独自に追加された機能で、横方向の折り返し時の禁則処理を指定します。
| 値 | 説明 |
|---|---|
| auto | 禁則処理方式が自動決定される。 |
| loose | 最低限の禁則処理。 |
| normal | 通常通り「。」や「、」が禁則処理される |
| strict | 通常の禁則文字に加え、「っ」や「ゃ」なども禁則処理される |
.sample > div {
width: 400px;
padding: 5px;
border: 1px solid gray;
}
.sample-auto {
line-break: auto;
}
.sample-loose {
line-break: loose;
}
.sample-normal {
line-break: normal;
}
.sample-strict {
line-break: strict;
}
<div class="sample">
<h5>auto</h5>
<div class="sample-auto">
<div>最後の「。」や「っ」が改行されたりされなかったりするんだよっ</div>
<div>最後の「。」や「っ」が改行されたりされなかったりするんだよっ。</div>
</div>
<h5>loose</h5>
<div class="sample-loose">
<div>最後の「。」や「っ」が改行されたりされなかったりするんだよっ</div>
<div>最後の「。」や「っ」が改行されたりされなかったりするんだよっ。</div>
</div>
<h5>normal</h5>
<div class="sample-normal">
<div>最後の「。」や「っ」が改行されたりされなかったりするんだよっ</div>
<div>最後の「。」や「っ」が改行されたりされなかったりするんだよっ。</div>
</div>
<h5>strict</h5>
<div class="sample-strict">
<div>最後の「。」や「っ」が改行されたりされなかったりするんだよっ</div>
<div>最後の「。」や「っ」が改行されたりされなかったりするんだよっ。</div>
</div>
</div>