data: () => ({
maxlen: 10,
items: [
'hello, world!!',
'fuck the world',
'fuck everything',
'1234567890',
'Lorem ipsum dolor sit amet, consectetur adipiscing elit,',
],
}),
methods: {
short1: (str, maxlen) => str.length <= maxlen ? str : str.slice(0, maxlen) + '...',
short2: (str, maxlen) => str.substring(0, maxlen) + (str.charAt(maxlen) && '...'),
short3: (str, maxlen) => str.replace(RegExp(`(.{${maxlen}}).+`), '$1...'),
short4: (str, maxlen) => str.replace(RegExp(`(?<=.{${maxlen}}).+`), '...'),
},
<input type="range" min="1" max="20" v-model="maxlen">
<span>{{ maxlen }}</span>
<div v-for="n in items">
<div v-text="short1(n, maxlen)"></div>
<div v-html="short2(n, maxlen)"></div>
<div :text-content.prop="short3(n, maxlen)"></div>
<div>{{ short4(n, maxlen) }}</div>
</div>
https://jsfiddle.net/dxm0gsnf/
