Vue.js 我想重新调整v-chip或其他想法，以创建文本字段

下午好！ 我想帮助调整设备所在的块的大小，最好我希望盒子是X px大小或类似的东西。但你有其他的解决办法，我想看看。我用的是vuetify

{{item.device}
mdi内容拷贝

在

v-chip

中添加一个类，并将

项设备

包装在一个span中

<v-chip class="short">
    <span>{{item.device}}</span>
    <v-icon small right @click.stop v-clipboard="item.uid" v-clipboard:success="showCopySnack">mdi-content-copy</v-icon>
</v-chip>

---

是否要将文本缩短？图标是否应始终显示？是否希望鼠标悬停/单击时更改大小

<v-chip class="short">
    <span>{{item.device}}</span>
    <v-icon small right @click.stop v-clipboard="item.uid" v-clipboard:success="showCopySnack">mdi-content-copy</v-icon>
</v-chip>

.short{
  width:100px;
}
.short span{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}