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

Question

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

what are you trying to do, thats unclear from the question. – Flame Jan 16 '20 at 12:22 — Flame, Jan 16 '20 at 12:22
seems to be cause by `-webkit-line-clamp: 2;` – Flame Jan 16 '20 at 12:28 — Flame, Jan 16 '20 at 12:28

score 17 · Accepted Answer · answered Jan 16 '20 at 12:27

17

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 Jan 16 '20 at 12:27

htmn

1,505
2
15
26

score 5 · Answer 2 · edited Sep 29 '21 at 12:28

5

I am using Vuetify but the above answers didn't work for me. But white-space: normal; worked.

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

add the class to v-list-item-substitle component.

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

edited Sep 29 '21 at 12:28

Dharman

30,962
25
85
135

answered Sep 29 '21 at 12:22

Sankha Karunasekara

1,636
18
19

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

2 Answers2

Linked