title: The div width is not wrapping the line-break text
body: <p>HTML</p>
  
  <pre><code>&lt;div class="wrapper"&gt;
    &lt;div class="tag"&gt;
      TestTestTestTest TestTestTestTestTestTest TestTestTest
    &lt;/div&gt;
  &lt;/div&gt;
  
  </code></pre>
  
  <p>CSS </p>
  
  <pre><code>.wrapper {
    max-width: 250px
  }
  
  .tag {
    vertical-align: top;
    background-color: red;
    padding: 3px;
    text-align: left;
    font-size: 12px;
  
    color: white;
    display: inline-block;
  }
  
  </code></pre>
  
  <p>You can see there is some space after the first line,
  How to set the width of div fit the content ?
  The current width should be the width of <code>break-all</code> not <code>break-word</code></p>
  
  <p>Current</p>
  
  <pre><code>[Test Test Test    ]
  [Test              ]
  </code></pre>
  
  <p>Expected</p>
  
  <pre><code>[Text Text Text]  // Keep Break word and the width fit the content
  [Text          ]
  </code></pre>
  
  <p>Here is the jsfiddle 
  <a href="https://jsfiddle.net/1f9atmwu/" rel="nofollow noreferrer">https://jsfiddle.net/1f9atmwu/</a></p>