<div class="box">
  <h2>slice</h2>
  <div class="demo">
    <span>Accusamus Etsy literally, flexitarian asymmetrical jean shorts McSweeney's Truffaut. 3 wolf moon Portland Thundercats, nisi keffiyeh skateboard officia sunt pickled cliche sartorial tote bag. Synth photo booth tofu magna, dolore tempor commodo. Put a bird on it placeat gastropub kogi. Ad umami mixtape mlkshk fanny pack excepteur. Tonx bitters keytar nisi irony culpa wayfarers, in id. Mollit artisan Tumblr synth drinking vinegar eu, Terry Richardson VHS swag iPhone.</span>
  </div>
</div>

<div class="box">
  <h2>clone</h2>
  <div class="demo">
    <span class="clone">Accusamus Etsy literally, flexitarian asymmetrical jean shorts McSweeney's Truffaut. 3 wolf moon Portland Thundercats, nisi keffiyeh skateboard officia sunt pickled cliche sartorial tote bag. Synth photo booth tofu magna, dolore tempor commodo. Put a bird on it placeat gastropub kogi. Ad umami mixtape mlkshk fanny pack excepteur. Tonx bitters keytar nisi irony culpa wayfarers, in id. Mollit artisan Tumblr synth drinking vinegar eu, Terry Richardson VHS swag iPhone.</span>
  </div>
</div>
body {
  box-sizing: border-box;
  padding: 1em;
  width: 100vw;
  height: 100vh;
  display: flex;
}
.box {
  margin: 0 1em;
  
  h2 {
    text-align: center;
  }
}

span {
  border: 1px solid red;
  font-size: 1.2em;
  padding: 10px;
  line-height: 2.5;
  hyphens: auto;
  background: orange;
  color: #fff;
  
  &.clone {
    border: 2px solid green;
    background-color: #f36;
    color: #fff;
    box-decoration-break: clone;
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.