wrap-word не работает с 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

На v-list-item__subtitle имеется свойство webkit-line-clamp. Попробуйте

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

Для v-list-item__title используйте white-space: normal;