box-decoration-breakプロパティは、インライン要素で、ボーダーやパディングが、行をまたいだ場合の挙動を設定します。
デフォルトは、slice 、他にcloneを指定しすることが出来ます。
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
HTML
<div class="test"> <span class="">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi </span></div> <div class="test "> <span class="break">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi </span> </div>
CSS
.break{
-webkit-box-decoration-break: clone;
-o-box-decoration-break: clone;
box-decoration-break: clone;
}
.test{
padding:1em;
background:url(https://tenman.info/labo/css/files/snow-644x428.jpg);
width:60vmin;
height:40vmin;
overflow:hidden;
}
.test span{
font-size:2vmin;
line-height:3.5em;
padding:1em;
background:rgba(255,255,255,.3);
box-sizing:border-box;
background-size:contain;
}