Limit the html content to be displayed in react being displayed by dangerouslysetinnerhtml

I have some html content in database and I am trying to dispaly it using dangerouslysetinnerhtml. But I don’t want to display the whole content. Lets suppose I have the text content and I want to display only the 100 characters followed by … .
My content is-

<p><span style="color: rgb(35,38,41);background-color: rgb(255,255,255);font-size: 15px;font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Liberation Sans", sans-serif;">I came across the following line of code which I couldn't understand ,although there are lot of tutorials that gives information related to examples of</span> <code>populate</code> <span style="color: rgb(35,38,41);background-color: rgb(255,255,255);font-size: 15px;font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Liberation Sans", sans-serif;">but there is none that explains what exactly it means.Here is a example</span>&nbsp;</p>

>Solution :

You can try trunc-html, in our site we make use of this package and it works great, it truncates the input html for the length you want, without breaking the html tree, just use it like this:

const TruncHtml = require('trunc-html');
let html = result.html // or whatever the html comes from
html = TruncHtml(html, 100).html