<button>clone</button>
<button>slice</button>

<h2>Span with Line Breaks</h2>
<div class="boxbreak">
  <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas architecto est voluptatibus debitis quibusdam incidunt labore veritatis explicabo quo?</span>
</div>

<h2>Paragraph Across Columns</h2>
<div class="columns">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas architecto est voluptatibus debitis quibusdam incidunt labore veritatis explicabo quo?</p>
</div>

/* styling for Pen, unrelated to box-decoration-break */

body {
  font-family: 'Source Sans Pro', sans-serif;
}

.boxbreak, .columns { color: white; }

.boxbreak {
  height: auto;
  width: 300px;
  padding: 0 1em;
  margin-bottom: 2em;
}

span, p {
  font-size: 1.3em;
  padding: .1em;
  border: 5px solid black;
  background: linear-gradient(to right, blue 0%, purple 50%, pink 100%);
  box-shadow: 1px 0 6px black;
}

.columns {
  width: 50%;
  -webkit-columns: 6em auto;
  -moz-columns: 6em auto;
  columns: 6em auto;
  -webkit-column-gap: 2em;
  -moz-column-gap: 2em;
  column-gap: 2em;
}

$('button').on('click', function() {
  $('span, p').css({
    '-webkit-box-decoration-break' : $(this).text(),
    '-moz-box-decoration-break' : $(this).text(),
    'box-decoration-break' : $(this).text()
  })
  // Force a redraw
  .hide().fadeIn(0);
});