Как сделать 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;
}