使用 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;
}

做到了！

使用 vue-material，我怎样才能让文本换行而不是溢出到列表中的省略号？

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

css

vue.js

material-design

vue-material