[Vuejs]-How to effectivly break line of the content inside a vuetify component?

by

0👍

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.

Leave a comment