Текст внутри контейнера

160

10 ноября 2021, 23:00

Я делаю <v-card> во vuetify и хочу сделать так, чтобы текст у меня был ограничен. Т.е. если текста оказывается слишком много, нужно, чтобы он не улетал за пределы контейнера

Хочется, чтобы было примерно так:

Answer 1

Один из способов сделать это на css:

overflow: hidden
text-overflow: ellipsis
white-space: nowrap

К сожалению, это не совсем то, что нужно. Получается так:

Данный пример можно доделать, чтобы работало так, как нужно. Для этого следует использовать мультилайн.

Проблема была побеждена с помощью фунции:

 cut(text) {
     if (text.length > this.max_length_description) {
         return text.slice(0, this.max_length_description) + '...'
     }
     return text;
 },

 <v-card-text
     class="custom-debug"
     style="
        height: 120px;
     "
 >
     {{ cut(course.short_description) }}
 </v-card-text>

Очевидно, это не самое изящное решение, так как при смене шрифта, придётся менять max_length_description