how to truncate options in the vue-multiselect?

Question

I want to truncate many value on the vue-multiselect.

I tried this to override many class but it's not working, like this example :

.multiselect__content-wrapper {
    overflow-x: hidden;
    text-overflow: ellipsis;
}

Answer 1

You can use this to avoid text getting wrapped and multi-select height change:

.multiselect__single {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}