Как обрезать слишком длинный текст при выводе?

В Vue.js для обрезки слишком длинного текста при выводе можно использовать несколько подходов.

1. Использование фильтра
Вы можете создать фильтр, который будет обрезать текст до определенной длины и добавлять многоточие в конце. Например:

Vue.filter('truncate', function(value, length) {
  if (!value) return '';
  if (value.length <= length) {
    return value;
  } else {
    return value.substring(0, length) + '...';
  }
});

Затем вы можете использовать этот фильтр в вашем шаблоне:

<p>{{ longText | truncate(10) }}</p>

2. Использование вычисляемых свойств
Вы также можете использовать вычисляемые свойства для обрезки текста. Вот пример:

new Vue({
  data: {
    longText: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
  },
  computed: {
    truncatedText: function() {
      if (!this.longText) return '';
      if (this.longText.length <= 10) {
        return this.longText;
      } else {
        return this.longText.substring(0, 10) + '...';
      }
    }
  }
});

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

<p>{{ truncatedText }}</p>

3. Использование CSS
Если вы хотите обрезать текст именно в представлении, вы можете использовать CSS-свойство text-overflow: ellipsis. Вам также понадобится установить overflow: hidden и white-space: nowrap, чтобы текст не переносился на новую строку. Пример:

<p class="truncate">{{ longText }}</p>

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

Это создаст многоточие в конце, если текст слишком длинный для отображения в пространстве, предоставленном элементом <p>.

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