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

Question

我想通过使用限制 v-chip 的宽度，text-overflow: ellipsis但 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>
                {{ 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

我能够通过 Vuetify 方式截断文本：

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

这里的技巧是通过添加省略号 css 的类cols=6来限制元素的宽度和跨度。text-truncateVuetify 文档：截断文本