Answer a question

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 :

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

Answers

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