wrap-word 不适用于 v-list-item-title/subtitle

Question

我正在使用 Vuetifyv-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.

代码笔

Answer 1

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

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

供v-list-item__title使用white-space: normal;

Answer 2

我正在使用 Vuetify 但上述答案对我不起作用。但white-space: normal;工作了。

.wrap-text {
   white-space: normal;
}

将类添加到v-list-item-substitle组件中。

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