[vue] Truncate long names in v-chip
Product admin names and run names can be really long in the product list page.
To avoid table overflow problem we truncate long names by using CSS.
</template>
<template #item.admins="{ item }">
- <v-chip
+ <span
v-for="admin in item.admins"
:key="admin"
+ class="v-chip-max-width-wrapper"
+ >
+ <v-chip
color="secondary"
class="mr-2 my-1"
outlined
+ :title="admin"
>
- <v-avatar left>
+ <v-avatar>
<v-icon>mdi-account-circle</v-icon>
</v-avatar>
{{ admin }}
</v-chip>
+ </span>
</template>
<template #item.runCount="{ item }">
</template>
<template #item.runStoreInProgress="{ item }">
- <v-chip
+ <span
v-for="runName in item.runStoreInProgress"
:key="runName"
+ class="v-chip-max-width-wrapper"
+ >
+ <v-chip
+ class="mr-2 my-1"
color="accent"
- class="mr-2"
>
- <v-avatar left>
+ <v-avatar>
<v-icon>mdi-play-circle</v-icon>
</v-avatar>
{{ runName }}
</v-chip>
+ </span>
</template>
<template v-slot:item.action="{ item }">
@@ -435,4 +444,18 @@ export default {
.v-list-item__subtitle {
white-space: normal;
}
+
+.v-chip-max-width-wrapper {
+ display: inline-block;
+ max-width: 150px;
+
+ ::v-deep .v-chip__content {
+ line-height: 32px;
+ display: inline-block !important;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ position: relative;
+ }
+}
</style>
\ No newline at end of file
