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 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.

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,

new Vue({
  el: '#app',
  data: {
     username: 'IIIII LOOOOOOOVE VUUUUE!!!'
    }
});

Step 2

 

Displaying limited characters of text in vue template, 

<div id="app">
  <div>Welcome, {{ username }}</div>
  <hr>
  <div>Welcome, {{ username.substring(0,10)+".." }}</div>
</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.