<!DOCTYPE html>
<html lang="en-US">
<head>
<style>
span{
padding: 1px 5px;
border-radius: 16px;
font-size: 24px;
line-height: 2;
border: 5px solid green;
-webkit-box-decoration-break: slice;
-moz-box-decoration-break: slice;
box-decoration-break: slice;
}
button{
display:block;
margin-top: 5px;
}
</style>
</head>
<body>
<h1>CSS box-decoration-break property</h1>
<span>This text<br>breaks<br>across multiple<br>lines</span>
<button onclick="myFunction">Click Me</button>
<script>
var x = document.getElementsByTagName("span")[0];
function myFunction(){
x.style.boxDecorationBreak = "clone";
x.style.WebkitBoxDecorationBreak = "clone";
x.style.OBoxDecorationBreak = "clone";
}
</script>
<p><strong>Note</strong>: This example may not work using javascript.</p> </body>
</html>