WEBページ作成リファレンス
cman.jp cman.jp > WEBページ作成TOP > CSSリファレンス > 「禁則処理のルール」

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」を参照ください。

ページTOP

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
広告
QrCode
このページのURL
スマートフォン・タブレット運営 : CMAN 株式会社シーマン