CODEWITHSUNDEEP
cssvue.jsmaterial-designvue-material
Shamoon
Shamoon

Reputation: 43569

With vue-material, how can I have text wrap instead of overflow to ellipsis in a list?

I have:

        <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 problem is that transcript.text can be longer than a line, so there's a text-overflow: ellipsis set. I tried to add text-overflow: visible !important as a scoped style, but that seems to be ignored.

vue-

So how can I have my text break normally and extend to multiple lines?

Upvotes: 2

Views: 2650

Answers (1)

Shamoon
Shamoon

Reputation: 43569

.md-list-item-text p {
  white-space: normal;
  padding-bottom: 1rem;
}

That did it!

Upvotes: 2

Related Questions