javascript - 换行符不适用于 v-list-item-title/subtitle

Question

我正在使用 Vuetify v-list成分。 我要在 v-list-item-subtitle 组件中显示更长的文本。此文本不完全可见:

为了避免这个问题，我成功地使用了我在类似情况下使用的方法:我选择应用具有 CSS 属性 word-wrap 的类设置为 break-word:

.wrap-text {
  word-wrap: break-word;
}

这样使用:

<v-list-item-subtitle v-html="item.subtitle" class="wrap-text"></v-list-item-subtitle>

这不能解决问题。当我使用 v-list-item-title 时，我注意到了相同的行为。

Codepen

Answer 1

有一个webkit-line-clamp v-list-item__subtitle 上的属性。尝试

.wrap-text {
  -webkit-line-clamp: unset !important;
}

对于 v-list-item__title 使用 white-space: normal;