Chip with long text in Vuetify

Question

I'm using the component v-chip from Vuetify, it cuts the text when the text is too long, is there any workaround for this?

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data() {
    return {

    }
  },
})

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet">

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.js"></script>

<div id="app">
  <v-app>
    <v-chip>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita consectetur suscipit vel! Aliquam, temporibus laborum delectus ea architecto obcaecati laudantium eos sed ducimus cum error repellat voluptatum ullam fugit, officia sit laboriosam vero similique. Voluptatibus provident magnam libero facilis eum in, labore pariatur optio nesciunt culpa, delectus tenetur, sit quod praesentium? Iusto, non ipsam quis aliquid veniam aliquam placeat minima cupiditate expedita enim alias saepe vero autem. Voluptatum doloribus distinctio illo adipisci expedita, sequi maxime aut ratione magnam ipsum velit vero officia odio deserunt pariatur minima! At, magni aliquam! Ipsum impedit non quos fugiat veniam dolorem ad itaque necessitatibus voluptas?
    </v-chip>
  </v-app>
</div>

Answer 1

To wrap the text:

.v-chip {
  height: auto !important;
}

.v-chip .v-chip__content {
  max-width: 100%;
  height: auto;
  min-height: 32px;
  white-space: pre-wrap;
}

Answer 2

One of many alternates is that you can add an ellipsis and add full text to a title.So you see a truncated text and full text on hover

<div id="app">
  <v-app>
    <v-chip large>
      <span class="wrapclass" :title="txt">
          {{txt}}
      </span>
    </v-chip>
  </v-app>
</div>

CSS:

.wrapclass {
  max-width: 99%;
  overflow: hidden;
  text-overflow: ellipsis;
}

JS:

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data() {
    return {
      txt: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita consectetur suscipit vel! Aliquam, temporibus laborum delectus ea architecto obcaecati laudantium eos sed ducimus cum error repellat voluptatum ullam fugit, officia sit laboriosam vero similique. Voluptatibus provident magnam libero facilis eum in, labore pariatur optio nesciunt culpa, delectus tenetur, sit quod praesentium? Iusto, non ipsam quis aliquid veniam aliquam placeat minima cupiditate expedita enim alias saepe vero autem. Voluptatum doloribus distinctio illo adipisci expedita, sequi maxime aut ratione magnam ipsum velit vero officia odio deserunt pariatur minima! At, magni aliquam! Ipsum impedit non quos fugiat veniam dolorem ad itaque necessitatibus voluptas?'
    }
  },
})

https://codepen.io/nizantz/pen/NWNWrJL