How to make Vuetify v-card-text single line?

user_7172416 0
Viewed 5317

I'm using vuetify v-card and I need to apply ellipsis css so that it remains single line and ... comes in when it exceeds.

I have used the following css properties:

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

And this is my v-card-title

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

I've even applied text-truncate, but nothing happens

vuetify.js vue.js css html
1 Answers

You can wrap text into a html block element to work

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