Post
Ask Question

Displaying Limited Number Of Characters As Text For Very Long Text In Vue.js 2 With Example

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.