Edit in JSFiddle

.example { 
  margin-left: 20px;
  padding: 0 10px;
  color: #3F3F3F;
  box-shadow: 8px 8px 10px 0px #e74c3c;
  border-radius: 10px;
  border: 5px solid #3F3F3F;
  line-height: 2;
}
.example2 {
  margin-left: 20px;
  padding: 8px 20px;
  background: #e74c3c;
  color:#fff;
  line-height: 1.5;
}
.clone {
  -webkit-box-decoration-break: clone;
  -o-box-decoration-break: clone;
  box-decoration-break: clone;
}
.contener {
  max-width: 550px;
  margin-bottom: 20px;
}

<div class="contener">
  <h1>
    <span class="example">Example of default "slice" value of box-decoration-break property</span>
  </h1>
</div>

<div class="contener">
  <h1>
    <span class="example clone">Example of set "clone" value of box-decoration-break property</span>
  </h1>
</div>

<div class="contener">
  <h1>
    <span class="example2">This solves common problem, when inline text breaks into multiple lines...</span>
  </h1>
</div>

<div class="contener">
  <h1>
    <span class="example2 clone">... and we want to keep consistent styling in each row</span>
  </h1>
</div>