CODEWITHSUNDEEP
vue.jsvuetify.js
FlowMafia
FlowMafia

Reputation: 1002

Chip with long text in Vuetify

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>

Upvotes: 3

Views: 4754

Answers (4)

Sanja
Sanja

Reputation: 326

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;
}

Upvotes: 5

LastM4N
LastM4N

Reputation: 2240

Adding a class in v-chip might solve this

class="text-truncate"

This will truncate long text with a text ellipsis

more info here: https://vuetifyjs.com/en/styles/text-and-typography/

Upvotes: 1

Ryan
Ryan

Reputation: 16

add styles to v-chip like these:

height: auto

white-space: normal

hope it would help.

Upvotes: 0

nizantz
nizantz

Reputation: 1621

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

Upvotes: 1

Related Questions