title: Padded text padding overflow not affecting word break
body: <p>Word "under" should go to next line, but it doesn't cause of inline padding i think.</p>
  
  <p>Is there anyway i can get text to break to next line when white padding touches edge of container.</p>
  
  <p><strong>Text needs to stay as inline cause i need that blank space between text lines.</strong> Tho if you have solution which requires to change that and result looks same as mine only the problem is fixed, than that will work too.</p>
  
  <p>P.S. My container in real situation is 100% 100% so width,height is not fixed for the block.</p>
  
  <p>It seems like it's not possible cause inline padding doesnt affect wrapping in any way and is completely ignored.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    background: #111111;
  }
  .container {
    width: 338px;
    height: 600px;
    background-color: #000;
    font-family: Arial;
    text-align: center;
  }
  h1 {
    font-weight: bold;
    font-size: 48px;
    background-color: #fff;
    display: inline;
    line-height: 95px;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
    padding: 10px 20px 10px 20px;
  }
  .sub {
    display: inline;
    background-color: #fff;
    font-size: 28px;
    padding: 20px 20px;
    line-height: 90px;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
    &lt;h1&gt;Heading title&lt;/h1&gt;
    &lt;br/&gt;
    &lt;span class="sub"&gt;Some random text under heading title&lt;/span&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>