title: Bulma - breaking text in a tag
body: <p>How does one break a long line of text in a div?</p>
  
  <p>I have tried css's <code>overflow-wrap: break-word;</code> and <code>word-wrap:break-word;</code> with no luck.</p>
  
  <p>In this example I am using tag inside a table which has a fixed width of 300px.</p>
  
  <p><a href="https://codepen.io/will-abbott/pen/qQwMMZ" rel="nofollow noreferrer">https://codepen.io/will-abbott/pen/qQwMMZ</a></p>
  
  <pre><code>&lt;table class="table is-bordered" width="300"&gt;
      &lt;tr&gt;
        &lt;th&gt;&lt;div class="tag"&gt;This is a very ong tag that needs to be automatically broken when it reaches the boundries of the countaining element!&lt;/div&gt;&lt;/th&gt;
        &lt;th&gt;&lt;div class="tag"&gt;This is a very ong tag that needs to be automatically broken when it reaches the boundries of the countaining element!&lt;/div&gt;&lt;/th&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p><strong>Final solution</strong></p>
  
  <p>I added this to <a href="https://stackoverflow.com/a/53612116/841591">Luiz's solution</a> to achieve the desired effect that makes it behave like a normal tag:</p>
  
  <p>** removed this: **
    width: 100%</p>
  
  <p>** added this: **
    text-align: left;
    display: inline-block !important;</p>