CSS - line-break

トップ > CSSリファレンス > line-break

概要

属性名 line-break
auto | loose | normal | strict
初期値auto
適用可能要素すべての要素
継承継承する
メディアVisual / Text
サポートe5

説明

IE5 で独自に追加された機能で、横方向の折り返し時の禁則処理を指定します。

説明
auto禁則処理方式が自動決定される。
loose最低限の禁則処理。
normal通常通り「。」や「、」が禁則処理される
strict通常の禁則文字に加え、「っ」や「ゃ」なども禁則処理される

使用例

CSS
.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;
}
HTML
<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>
表示
auto
最後の「。」や「っ」が改行されたりされなかったりするんだよっ
最後の「。」や「っ」が改行されたりされなかったりするんだよっ。
loose
最後の「。」や「っ」が改行されたりされなかったりするんだよっ
最後の「。」や「っ」が改行されたりされなかったりするんだよっ。
normal
最後の「。」や「っ」が改行されたりされなかったりするんだよっ
最後の「。」や「っ」が改行されたりされなかったりするんだよっ。
strict
最後の「。」や「っ」が改行されたりされなかったりするんだよっ
最後の「。」や「っ」が改行されたりされなかったりするんだよっ。

Copyright (C) 1997-2012 杜甫々
初版:1997年7月27日、最終更新:2012年5月1日
http://www.tohoho-web.com/css/prop/line-break.htm