How to effectivly break line of the content inside a vuetify component?

Question

Hi i'm triying to break line at the content inside a vuetify component but I haven't success. I need help to understand why, see the code below

<v-list-item-content style="word-break: break-word" class="kbDarkBlueText--text d-block" v-else>
                    {{ longText}}
</v-list-item-content>

I also try to apply the class text-wrap and the style break-all but none success. pd: html element is setted to word-break:normal

@Mohsen: your links are not related to OP's problem with v-list-items. See my answer below instead. — Fred, Jul 07 '22 at 17:41

score 0 · Answer 1 · answered Jul 07 '22 at 17:39

The issue is that v-list-item-title and v-list-item-subtitle avoid line breaks and cut overflowing text with an ellipsis instead. This hides long texts.

To change this behavior, you can manipulate the CSS like this:

<style scoped>
* /deep/ .v-list-item__subtitle {
  white-space: normal;
}
</style>

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

I'm using scoped CSS here to apply this only to the component you use it in. As the CSS is scoped, the /deep/ selector is required. See docs on scoped CSS in Vue.

If you want to apply the behavior globally, you can remove the scoped property and the /deep/ selector.

How to effectivly break line of the content inside a vuetify component?

1 Answers1