如何使 Vuetify v-card-text 单行？

Question

我正在使用 vuetify v-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;
}