Обрезка текста

В Vuetify управление длинными текстовыми блоками выполняется с помощью встроенных утилит и компонентов, позволяющих аккуратно обрезать текст, добавлять многоточие и обеспечивать адаптивность в интерфейсе. Основной механизм работы с обрезкой текста строится на сочетании CSS-классов и свойств компонентов Vuetify.

Свойство `truncate` для компонентов

Vuetify предоставляет встроенное свойство truncate, которое применяется к компонентам текста, таким как v-text, v-btn, v-list-item-title.

Пример использования:

<v-list-item-title truncate>
  Это очень длинный текст, который необходимо обрезать, чтобы он не ломал верстку
</v-list-item-title>

Особенности:

Автоматически добавляется многоточие (…) в конце текста.
Работает только с однострочными блоками.
Не требует ручного использования CSS.

Использование классов обрезки текста

Vuetify содержит ряд CSS-классов для управления текстом:

text-truncate — обрезает текст с многоточием, аналог свойства truncate.
text-no-wrap — запрещает перенос строки, текст остаётся в одной строке.
text-ellipsis — добавляет многоточие при переполнении контейнера.

Пример:

<v-card class="pa-3" max-width="300">
  <div class="text-truncate">
    Длинный текст в карточке, который нужно обрезать при превышении ширины контейнера
  </div>
</v-card>

Важно: text-truncate и text-ellipsis требуют, чтобы контейнер имел ограничение по ширине (max-width) или фиксированную ширину (width). Без ограничения текст не будет обрезаться.

Многострочная обрезка текста

Для многострочной обрезки применяется комбинация CSS-свойств, которые можно использовать в Vuetify с помощью класса class или в стилях компонента:

.multiline-truncate {
  display: -webkit-box;
  -webkit-line-clamp: 3; /* Количество видимых строк */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

Применение в компоненте:

<v-card class="pa-3" max-width="300">
  <div class="multiline-truncate">
    Этот текст длинный и может занимать несколько строк. Использование
    -webkit-line-clamp позволяет ограничить количество видимых строк и автоматически
    добавляет многоточие, сохраняя аккуратный вид интерфейса.
  </div>
</v-card>

Пояснения:

-webkit-line-clamp контролирует количество строк до обрезки.
Работает только с браузерами на движке WebKit (Chrome, Safari, Edge).
Для кроссбраузерности необходимо учитывать fallback-стили.

Использование слотов и динамического обрезания

Компоненты Vuetify поддерживают слоты, что позволяет обрезать текст динамически и сохранять семантику компонента. Например, для кнопки или списка:

<v-btn class="text-truncate" max-width="200">
  Очень длинная подпись кнопки
</v-btn>

<v-list-item>
  <v-list-item-title class="text-truncate" max-width="250">
    Длинное название элемента списка, которое нужно обрезать
  </v-list-item-title>
</v-list-item>

Преимущества:

Сохраняется гибкость компонентов.
Совместимо с динамическими данными из Vue.

Настройка обрезки через стили Vuetify

Для более тонкого контроля можно использовать SCSS-переменные Vuetify или собственные CSS-классы:

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

Пример:

<v-chip class="custom-truncate" max-width="150">
  Очень длинный текст чипа
</v-chip>

Рекомендации по применению:

Использовать при необходимости интеграции с Vuetify-классами.
Совмещать с адаптивными размерами контейнеров (max-width или flex).
Проверять поведение на мобильных устройствах.

Адаптивная обрезка текста

Для интерфейсов с изменяемой шириной часто применяются комбинации классов Vuetify и медиа-запросов:

<v-card class="pa-3" style="max-width: 100%;">
  <div class="text-truncate" :style="{ maxWidth: computedWidth + 'px' }">
    Длинный адаптивный текст, который подстраивается под ширину контейнера
  </div>
</v-card>

export default {
  data() {
    return {
      computedWidth: 300
    }
  },
  mounted() {
    window.addEventListener('resize', this.updateWidth)
  },
  methods: {
    updateWidth() {
      this.computedWidth = window.innerWidth * 0.8
    }
  }
}