Задать вопрос
@Old_Chicken
vue

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

Как при выводе текста сделать так, чтобы все символы после 16-го превращались в три точки?

const app = new Vue({
  el: '#app',
  data() {
    return {
      items: [
        {text: 'qweewqeqweqw qweeqweq kqwe,qlwe, eqwe'},
        {text: 'qweewqeqweqw qweeqweq kqwe,qlwe, eqwe'},
        {text: 'qweewqeqweqw qweeqweq kqwe,qlwe, eqwe'},
        {text: 'qweewqeqweqw qweeqweq kqwe,qlwe, eqwe'},
        {text: 'qweewqeqw'},
        {text: 'qweewqeqweqw qweeqweq kqwe,qlwe, eqwe'},
        {text: 'qweewqeqw'},
        {text: 'qweewqeqweqw qweeqweq kqwe,qlwe, eqwe'},
        {text: 'qweewqeqw'},
     ],
    }
  },
  methods: {
    Massageforpeople() {
      if (this.items.text.length >= 16) {
        
      }
    }
  },
});

<div class="" id="app">
      <div class="block" v-for="item in items">
         {{Massageforpeople()}} - {{item.text.length}}
      </div>
   </div>
  • Вопрос задан
  • 619 просмотров
1 комментарий
Подписаться 3 Простой 1 комментарий
Решения вопроса 1
0xD34F
@0xD34F Куратор тега Vue.js 
methods: {
  short: (str, maxlen) => str.length <= maxlen ? str : str.slice(0, maxlen) + '...',
},

<div v-for="n in items" v-text="short(n.text, 16)"></div>
Ответ написан
Комментировать
Комментировать
Пригласить эксперта
Ответы на вопрос 2
noder_ss
@noder_ss
Линуксоид-энтузиаст и SQL разработчик
Легко ищется: 
<body>
<p class="text">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Consequuntur laudantium commodi corporis, sunt repellendus impedit quo veritatis reiciendis. Deleniti sequi cumque id animi cupiditate, cum maiores eaque minus maxime itaque.</p>

</body>
<script>
let text = document.querySelector('.text')

text.innerHTML = text.innerHTML.slice(0, 16) + "..."
</script>
Ответ написан
Комментировать
Комментировать
firedragon
@firedragon
Не джун-мидл-сеньор, а трус-балбес-бывалый.
Варианты выше предложенные в принципе рабочие, но есть решение на основе css
https://www.tune-it.ru/web/leksa/blog/-/blogs/3044392
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Frontend-разработчик VUE (Senior, Middle+)
SOFT DIVISION • Ярославль
от 150 000 до 300 000 ₽
Второй ведущий разработчик (Fullstack, PHP, Laravel, Vue, Mysql)
Donatov.net
от 100 000 до 300 000 ₽
Frontend developer (middle/senior)
//stablecode
от 210 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Доработать обмен заказами 1с
11 мая 2024, в 00:19
1000 руб./за проект
Разработка сайта (верстка)
10 мая 2024, в 23:51
30000 руб./за проект
Опубликовать приложение в Google play
10 мая 2024, в 23:33
2500 руб./за проект
Ещё заказы