Implementing Text ReadMore in WiniLogis Our Shipment

First, the spec asked that on mobile screens a Read more button appear when the text runs to 3 lines or more.

To meet this requirement, I had implemented it myself so that on mobile the Read more button appeared when the text was over a certain length.

The problem was that several issues came up, such as English and Korean being mixed, or differences in character width like A and b.

I searched Google a lot to solve this, but I had not found a solution I really liked.

After continued effort, though, I found a library that suits the tech stack WiniLogis uses.

https://www.npmjs.com/package/react-show-more-text

react-show-more-text

Its most recent update was also 3 months ago, so I thought it was reliable.

After I left work, I couldn't stop thinking, "How should I solve this problem?", so I went home and tried implementing it first.

Here is how I implemented it.

1
2npm install react-show-more-text
npm i --save-dev @types/react-show-more-text

If you use the example code from the link above, you can customize the Read More button like I did, and also decide whether the Read More button shows based on the number of lines.

One more issue when I applied it today: white-space: pre-line did not work!

The fix

1
2
3
4
5<div
	dangerouslySetInnerHTML={{
	__html: boardItem.content.replace(/(?:\r\n|\r|\n)/g,'<br />',),
    }}
/>