In this blog, we will see how to display a limited number of characters in text when our text is very very long and exceeding the width of our div or any other GUI element.
For working code - JsFiddle Link
Step 1
Assigning a variable in vue.js having more than 10 characters (choose whatever value you like) in the Javascript side of vue.js,
  1. new Vue({
  2. el: '#app',
  3. data: {
  4. username: 'IIIII LOOOOOOOVE VUUUUE!!!'
  5. }
  6. });
Step 2
Displaying limited characters of text in vue template,
  1. <div id="app">
  2. <div>Welcome, {{ username }}</div>
  3. <hr>
  4. <div>Welcome, {{ username.substring(0,10)+".." }}</div>
  5. </div>
Here I have used the concepts of string functions in javascript. substring() is used to get substring out of a string of defined characters.

Conclusion

We learned how to display a limited number of characters in text in vue.js 2.