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

ボックスが改行する時の表示方法を指定する「box-decoration-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
初期値slice
適用される要素すべての要素
モジュールCSS Fragmentation Module Level 3
継承なし

概要・使用方法

{ box-decoration-break: 表示方法;}

box-decoration-breakプロパティ」は、幅の折り返しで改行する時に、ボーダー、余白、角丸、背景などの表示方法を指定します。

chrome、edge、operaブラウザーは接頭辞に「-webkit-」を指定する必要があります。

指定できる値(表示方法)

slice分割されたボックスを連続したボックスとして扱い、ボーダー、余白、角丸、背景などは分割されます。
clone分割されたボックスを独立したボックスとして扱い、ボーダー、余白、角丸、背景などは分断後に再適用されます。
border-radius、border-image、box-shadowプロパティなどの指定もすべて適用されます。

サンプルコード

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>box-decoration-breakプロパティ CSSフォントサンプルページ</title>
    <meta charset="uft-8">
    <style>
           .box-base{width:20em;}
           .box1{
                     border:5px solid red;
                     margin:0.5em 0em;
                     box-decoration-break:slice;
                     -webkit-box-decoration-break:slice;
                     
           }
           .box2{
                     border:5px solid red;
                     margin:0.5em 0em;
                     box-decoration-break:clone;
                     -webkit-box-decoration-break:clone;     
           }
    </style>
  </head>
  <body>
      <div class="box-base">
          <h1>box-decoration-break:slice;</h1>
          <p>クラゲは、通常は浮遊生活をする刺胞動物である。<span class="box1">体はゼラチン質で柔らかく、透明。体全体は、</span>多くのものでは傘のような形をしている。多くの場合、傘の下面の中心部に口がある。ヒドロクラゲでは傘から柄が伸びてその先に口があるものや、口の周囲に触手が発達するものもある。鉢クラゲの旗口クラゲ類、根口クラゲ類では、口の縁が長く伸びて口腕となる。</p>
          <h1>box-decoration-break:clone;</h1>          
          <p>クラゲは、通常は浮遊生活をする刺胞動物である。<span class="box2">体はゼラチン質で柔らかく、透明。体全体は、</span>多くのものでは傘のような形をしている。多くの場合、傘の下面の中心部に口がある。ヒドロクラゲでは傘から柄が伸びてその先に口があるものや、口の周囲に触手が発達するものもある。鉢クラゲの旗口クラゲ類、根口クラゲ類では、口の縁が長く伸びて口腕となる。</p>
      </div>
  </body>
</html>

「box-decoration-breakプロパティ」にcloneを指定すると改行したのちも独立したボーダーや背景となる。

box-decoration-break:slice;

クラゲは、通常は浮遊生活をする刺胞動物である。体はゼラチン質で柔らかく、透明。体全体は、多くのものでは傘のような形をしている。多くの場合、傘の下面の中心部に口がある。ヒドロクラゲでは傘から柄が伸びてその先に口があるものや、口の周囲に触手が発達するものもある。鉢クラゲの旗口クラゲ類、根口クラゲ類では、口の縁が長く伸びて口腕となる。

box-decoration-break:clone;

クラゲは、通常は浮遊生活をする刺胞動物である。体はゼラチン質で柔らかく、透明。体全体は、多くのものでは傘のような形をしている。多くの場合、傘の下面の中心部に口がある。ヒドロクラゲでは傘から柄が伸びてその先に口があるものや、口の周囲に触手が発達するものもある。鉢クラゲの旗口クラゲ類、根口クラゲ類では、口の縁が長く伸びて口腕となる。

chromeブラウザ実行結果

chrome


Firefox ブラウザ実行結果

Firefox


edgeブラウザ実行結果

edge


operaブラウザ実行結果

opera