I am working on a requirement where We have to put a 'Read More' link after a certain character of HTML content. We would like to implement it in a way that should not break any HTML. We should place the 'Read More' link either before starting an HTML tag opening or after completing it. For example if our HTML text is

Lorem ipsum dolor sit amet, consectetur adipiscing elit.Integer dapibus sagittis 
<ul>
  <li>1. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
  <li>2. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
</ul>

And our text split point is 100 characters, It breaks content like

Lorem ipsum dolor sit amet, consectetur adipiscing elit.Integer dapibus sagittis 
<ul>
  <li>1. Lorem ipsum dolor sit amet

We dont want that. We want to implment it in a way thst if our character limit is falling between HTML tags, content should slices either before starting of HTML tag or after closing it. So it should be

Lorem ipsum dolor sit amet, consectetur adipiscing elit.Integer dapibus sagittis
--> Slice content here
<ul>
  <li>1. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
  <li>2. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
</ul>
--> Or slice content here

We are using reactJS as our development framework. Here is our content slicing code

const isLongContent = validContent.length > sliceLength
const visibleContent = isLongContent ? validContent.slice(0, sliceLength) + '...'
  : validContent