html - 如何使 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>

我什至应用了文本截断，但没有任何 react

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;
}