CSS text-overflow: ellipsis在V-chip上无效

Question

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

- Philx94

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>

这里的技巧在于使用“cols=6”限制元素宽度，以及使用带有“text-truncate”类的跨度，该类添加省略号css。 Vuetify文档：截断文本

- Jeffrey van der Lem - Meesters

---

非常干净的解决方案 +1 - undefined

Answer 2

为了达到预期的效果，请使用以下选项将省略号 CSS 添加到 v-chip__content 类。

    .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 - https://codepen.io/nagasai/pen/oNgMzxq

- Naga Sai A

---

你有没有想过为什么我的Webstorm IDE无法识别选择器.v-chip__content？它说.v-chip__content从未被使用过。此外，尽管省略号在芯片上起作用，但关闭图标却没有显示。 - Philx94

@Philx94，请为v-chip_close添加CSS，并调整位置以正确显示，已添加到帖子和CodePen供参考。 - Naga Sai A

我需要这样写：::v-deep .v-chip__content。 - Philx94

在Chrome的CodePen中没有省略号，而芯片中的文本奇怪地对齐到芯片的顶部。 - Drak