CSS文本溢出：省略号在V芯片上不起作用

Question

我想通过使用text-overflow: ellipsis限制v芯片的宽度，但是Vuetify v-chip似乎无法识别它。

我想避免这个问题：

<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="selected === i">
                {{ 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;
    }

Answer 1

为了获得预期的结果，请使用下面的在v-chip__content类中添加省略号CSS的选项

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


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

Codepen供参考-https://codepen.io/nagasai/pen/oNgMzxq