Чип с длинным текстом в Vuetify

Question

Я использую компонент v-chip из Vuetify, он обрезает текст, когда текст слишком длинный, есть ли обходной путь для этого?

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

    }
  },
})

<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">

<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/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

добавьте стили в v-chip, например:

height: auto

white-space: normal

надеюсь, что это поможет.

Answer 2

Добавление класса в v-chip может решить эту проблему

class="text-truncate"

Это будет обрезать длинный текст с текстовым многоточием

подробнее здесь: https://vuetifyjs.com/en/styles/text-and-typography/

Answer 3

Одним из многих альтернатив является то, что вы можете добавить многоточие и добавить полный текст к заголовку. Таким образом, вы увидите усеченный текст и полный текст при наведении курсора

<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