title: With vue-material, how can I have text wrap instead of overflow to ellipsis in a list?
body: <p>I have:</p>
  
  <pre><code>        &lt;md-list-item&gt;
            &lt;md-icon v-bind:style="{color: transcript.color}"&gt;account_circle&lt;/md-icon&gt;
  
            &lt;div class="md-list-item-text"&gt;
              &lt;p&gt;{{ transcript.text }}&lt;/p&gt;
            &lt;/div&gt;
  
            &lt;md-button class="md-icon-button md-list-action"&gt;
              &lt;small&gt;some stuff&lt;/small&gt;
            &lt;/md-button&gt;
          &lt;/md-list-item&gt;
  </code></pre>
  
  <p>The problem is that <code>transcript.text</code> can be longer than a line, so there's a <code>text-overflow: ellipsis</code> set. I tried to add <code>text-overflow: visible !important</code> as a scoped style, but that seems to be ignored.</p>
  
  <p><a href="https://i.stack.imgur.com/dg3r8.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/dg3r8.png" alt="vue-"></a></p>
  
  <p>So how can I have my text break normally and extend to multiple lines?</p>