CSS辞典 word-breakプロパティの解説

css辞典 CSS辞典
この記事は約5分で読めます。

文章の改行方法を指定する「word-breakプロパティ」の使用方法を記載

CSS3/2.1

スポンサーリンク

対応ブラウザ

ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:chrome
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:firefox
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:safari
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:ms edge
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:ms ie
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:opera
初期値 normal
適用される要素 すべての要素
モジュール CSS Text Module Level3
継承 あり

概要・使用方法

{word-break: 改行方法;}

word-breakプロパティ文章の改行方法を指定します。

改行方法

normal改行方法を指定しません
keep-all日本語、中国語、韓国語の単語の途中では改行しません。
break-all表示範囲に合わせて改行する。単語の途中でも改行する。
※line-breakプロパティで禁止されていない限り

サンプルコード

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>word-breakプロパティ CSSフォントサンプルページ</title>
    <meta charset="uft-8">
    <style>
          .sample0{
                    word-break: normal;
                    width: 200px;
                    height: 100px;
                    border: 1px solid #ffaa00;
                  }
          .sample1{
                    word-break: break-all;
                    width: 200px;
                    height: 100px;
                    border: 1px solid #ffaa00;
                  }
          .sample2{
                    word-break: keep-all;
                    width: 200px;
                    height: 100px;
                    border: 1px solid #ffaa00;
                  }
    </style>
  </head>
  <body>
      <h1>normal</h1>
      <p class="sample0">Is it a scrubbing brush that can be used as a turtle scrub
      bing brush?
      </p>
      <h1> break-all</h1>
      <p class="sample1">Is it a scrubbing brush that can be used as a turtle scrub
      bing brush?
      </p>
      <h1> keep-all</h1>
      <p class="sample2">Is it a scrubbing brush that can be used as a turtle scrub
      bing brush?
      </p>
  </body>
</html>
実行結果

normal

Is it a scrubbing brush that can be used as a turtle scrub bing brush?

break-all

Is it a scrubbing brush that can be used as a turtle scrub bing brush?

keep-all

Is it a scrubbing brush that can be used as a turtle scrub bing brush?

chrome 実行サンプル

word-breakプロパティのchromeブラウザの実行結果

Firefox 実行サンプル

word-breakプロパティのfirefoxブラウザの実行結果

edge 実行サンプル

word-breakプロパティのedgeブラウザの実行結果

opera 実行サンプル

word-breakプロパティのoperaブラウザの実行結果

コメント

タイトルとURLをコピーしました