0

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
Improve this question
3
  • can you provide the text-splitting code ? Commented Mar 22, 2022 at 10:51
  • @johnSmith updated in the question content Commented Mar 22, 2022 at 10:55
  • either you use DOMParser to parse the text as a DOM where you could traverse all nodes and apply the truncate only on the text-contents or you use a plugin/script to truncate html-text stackoverflow.com/questions/3822233/… Commented Mar 22, 2022 at 11:02
Related questions
6
Implementing a Read More link in React.js
2
Break html content into separate higher level html tags and store them in array
0
reactjs cannot recognize html tags when the tag is appended in the text
Load 7 more related questions Show fewer related questions

0

Reset to default

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.