Question:
<md-list-item>
<md-icon v-bind:style="{color: transcript.color}">account_circle</md-icon>
<div class="md-list-item-text">
<p>{{ transcript.text }}</p>
</div>
<md-button class="md-icon-button md-list-action">
<small>some stuff</small>
</md-button>
</md-list-item>
The challenge I'm facing is that the transcript.text
can sometimes exceed a single line, resulting in an overflow with an ellipsis added at the end. I attempted to address this by applying
text-overflow: visible !important
as a scoped style, but it doesn't seem to have any effect.
https://i.sstatic.net/dg3r8.png
How can I ensure that my text breaks naturally and continues onto multiple lines instead of being truncated?