С vue-material, как я могу иметь перенос текста вместо переполнения многоточием в списке?

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>

Проблема в том, что transcript.text может быть длиннее строки, поэтому есть набор text-overflow: ellipsis. Я пытался добавить text-overflow: visible !important в качестве стиля с областью видимости, но это, кажется, игнорируется.

Так как я могу сделать так, чтобы мой текст разрывался нормально ирасширить на несколько строк?

Answer 1

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

Вот и все!