如何使Vuetify v卡文本单行

Question

我使用的是vuetifyv-card，我需要应用省略号css，以便它保持单行和。。。超过时进来。

我使用了以下css属性：

.headerClass {
white-space: nowrap !important;
width: 95px;
word-break: normal!important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}

这是我的v-card-title

<v-card-title class="body-2 pl-2 headerClass">{{data}}</v-card-title>

我甚至应用了文本截断，但什么都没发生

Answer 1

您可以将文本包装到html块元素中以使用

<v-card-title class="body-2 pl-2">
<div class="headerClass">
{{data}}
</div>
</v-card-title>

CSS：

.headerClass{
white-space: nowrap ;
word-break: normal;
overflow: hidden ;
text-overflow: ellipsis;
}