wrap-word does not work on v-list-item-title/subtitle

Issue

I am using Vuetify v-list component. I have a bit longer text to display within the v-list-item-subtitle component. This text is not fully visible:

To avoid this issue, I used what I use in similar situations successfully: I opt to apply a class with the CSS property word-wrap set to break-word:

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

used this way:

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

This does not fix the issue. I noticed the same behavior when I use v-list-item-title.

Codepen

Solution

There is a webkit-line-clamp property on the v-list-item__subtitle. Try

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

For v-list-item__title use white-space: normal;

Answered By - htmn