0

In vuejs, I need to print text which has style also. I am showing data using v-html and limit 160 characters. If user will click on readmore then more data will show.

Problem is: The below body field has data like this. As starting code has css classes and substring is counting css classes and do not show because 160 characters get finished with in css classes.

 "body": "<p style=\"box-sizing: border-box; margin: 0px 0px 10px; text-align: justify; color: #000000; font-family: 'Open Sans'; font-size: 15px;\"><span style=\"box-sizing: border-box;\">Often we can find ourselves stumbling through a day, exhausted. Our work feels draining, our meal times aren&rsquo;t refreshing, and our nights are spent tossing and turning. This often comes from a lack of balance, and that lack of balance can be corrected if we think of our lives in terms of having three resources available to us.



      <div class="col-12 col-lg-4" v-for="item in posts" :key="item.id">


                <p v-html="item.body.substring(0, 160) + '...'"></p>

How can I limit characters even css classes are showing also?

Nishant sethi
  • 13
  • 2
  • Hi Nishant, you can check this answer if it meet your needs: https://stackoverflow.com/a/42880446/7445312 – Seididieci Nov 18 '22 at 09:14
  • Thanks for the response. But I am afraid, it will not work. The point is I dnt understand how v-html convert and then use that value to substring. If v-html works in function then I can trim it when I am returning. – Nishant sethi Nov 18 '22 at 09:27
  • I'm not sure but i think the v-html directive is a simple `.innerHtml` assigment, it will not compile anything inside and I think you cannot use it as a function... Maybe you have to create a component and render the HTML by yourself, so you can have more control on it. – Seididieci Nov 18 '22 at 09:40
  • Do you even need v-html in the first place? – kissu Nov 18 '22 at 12:01

0 Answers0