CODEWITHSUNDEEP
cssvue.jsvuetify.js
Philx94
Philx94

Reputation: 1295

CSS text-overflow: ellipsis not working on V-chip

I want to limit the width of a v-chip by using text-overflow: ellipsis but it seems that Vuetify v-chip doesn't recognize it.

I want to avoid this problem : enter image description here

<v-chip-group
             v-model="selected"
             mandatory
             column
             active-class="primary--text"
        >
            <v-chip v-for="(item, i) in recipes" :key="i"
                    class="chip-overflow"
                    @click:close="deleteListedRecipe(item)"
                    close>
                {{ item.name }}
            </v-chip>
        </v-chip-group>

    .chip-overflow {
        max-width: 150px;
        padding: 2px 5px;
        display:block;

        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

Upvotes: 5

Views: 5911

Answers (2)

Jeffrey van der Lem - Meesters
Jeffrey van der Lem - Meesters

Reputation: 236

I was able to truncate text the Vuetify way doing this:

<v-row>
  <v-col cols="6">
    <v-chip close>
      <span class="text-truncate">
        {{ product.title }}
      </span>
    </v-chip>
  </v-col>
</v-row>

The trick here is the cols=6 which limits the elements width and the span with the text-truncate class which adds the ellipsis css. Vuetify documentation: truncate text

Upvotes: 10

Naga Sai A
Naga Sai A

Reputation: 10975

To achieve expected result, use below option of adding ellipsis CSS to v-chip__content class

    .chip-overflow{
            max-width: 150px;
            padding: 2px 5px;
        }


    ::v-deep .v-chip__content {
      display: inline-block !important;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

 ::v-deep .v-chip__close {
  position: absolute;
  top: 5px;
  right: 0;
  width: 24px;
}

Codepen for reference - https://codepen.io/nagasai/pen/oNgMzxq

Upvotes: 1

Related Questions