'How to not break HTML with open html tags for Read More functionality

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'How to not break HTML with open html tags for Read More functionality

Sources

Related Questions