cman.jp > WEBページ作成TOP > CSSリファレンス > 「禁則処理のルール」
WEBページ作成
広告
line-break「改行規則」
line-breakは、文字（単語）途中での改行位置を指定します。日本語にも対応しており、ブログなど文書が主のページには、body全体に指定しておいた方が文書が読みやすくなります。
ブラウザにより改行位置は異なりますのでご注意ください。
| CSS Ver. | 適用要素 | 継承 |
|---|---|---|
| 3.0 | 全て | する |
広告
line-breakの指定方法
| 構文 | |
|---|---|
|
line-break : [ auto | loose | normal | strict ]; |
|
| プロパティ | 意味 |
| line-break: auto; | ブラウザに任せます |
| line-break: loose; | もっとも条件が少ない改行規則。一般的に新聞など行幅が短い場合に使用します。 |
| line-break: normal; | もっとも一般的な改行規則 |
| line-break: strict; | 小文字のかな「ぁ」なども改行規則に含めます |
|
デフォルトはブラウザにより異なります。現在使用中のブラウザのデフォルトは「タグ毎のスタイル初期値」を参照 改行ルールの詳細はW3C「https://www.w3.org/TR/css-text-3/#line-break-property」を参照ください。 |
|
line-break のサンプル
<style type="text/css">
#sample-area1 {
width:310px ;
}
#sample-area1 > div {
border: 1px solid #ccc;
margin:3px;
}
.break-auto { line-break : auto }
.break-loose { line-break : loose}
.break-normal{ line-break : normal}
.break-strict{ line-break : strict}
</style>
<html>
<div id="sample-area1">
<div class="break-auto">ちぇっく！、チェック？、ちぇっく！、チェック？、ちぇっく！</div>
<div class="break-loose">ちぇっく！、チェック？、ちぇっく！、チェック？、ちぇっく！</div>
<div class="break-normal">ちぇっく！、チェック？、ちぇっく！、チェック？、ちぇっく！</div>
<div class="break-strict">ちぇっく！、チェック？、ちぇっく！、チェック？、ちぇっく！</div>
</div>
</html>
幅変更→
ちぇっく！、チェック？、ちぇっく！、チェック？、ちぇっく！
ちぇっく！、チェック？、ちぇっく！、チェック？、ちぇっく！
ちぇっく！、チェック？、ちぇっく！、チェック？、ちぇっく！
ちぇっく！、チェック？、ちぇっく！、チェック？、ちぇっく！
「line-break」はブラウザにより改行位置は異なります。
ページTOP| 関連するCSS(STYLE) | |
|---|---|
| page-break-after | 改ページの位置：ボックス後 |
| page-break-before | 改ページの位置：ボックス前 |
| page-break-inside | 改ページの位置：ボックス内 |
| word-break | 自動改行のルール |
| line-height | 行の高さ |
| vertical-align | 縦（垂直）方向の文字位置 |
広告