我正在使用ReactJS开发一个博客网站，我希望当用户点击查看完整的内容，而不是滚动的行为，我们在大多数博客网站上，我希望一个逐页查看，因为我们在PDF阅读器，其中用户点击按钮，并将被带到一个新的页面，因为他继续阅读。
如何限制每页的字符数而不考虑字数？例如：如果作者发表了2000字，我只会显示500字的第一页，当用户点击“下一步”按钮，它移动到另一个页面的500字，直到用户在文章的最后一个字。
How I want it to look
下面是代码

export default function Read() {
return (
    <div className="h-screen">
        <div className="flex items-center justify-between  w-screen h-[45px] z-10 bg-white drop-shadow-lg top-0">
            <Link className="flex items-center text-white bg-indigo-800 h-full" href="/"><ArrowLeftIcon
                className="w-6 text-white active:text-white"/><span>Home</span></Link>
            <div className="text-sm font-bold ">
                <p>Book Title will be here</p>
            </div>
            <div className="text-xs font-bold ">
                <p>Page 1</p>
            </div>

            <div className=" ">
                <AdjustmentsHorizontalIcon className="w-7 text-indigo-900 active:text-white"/>
            </div>
        </div>

        <div className="px-1.5 bg-zinc-300 shadow-lg">
            <p className="bg-white px-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                Beatae dolor dolores incidunt, ipsa ipsam iure labore maiores
                nobis nulla, odio omnis placeat quod, reiciendis. Cum deleniti
                fugit laudantium repudiandae velit? Dicta dolorem explicabo fuga
                illum incidunt itaque laboriosam magni necessitatibus numquam
                perspiciatis qui quis, quo recusandae, rerum similique temporibus
                tenetur!
                <br/>
                <br/>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                Beatae dolor dolores incidunt, ipsa ipsam iure labore maiores
                nobis nulla, odio omnis placeat quod, reiciendis. Cum deleniti
                fugit laudantium repudiandae velit? Dicta dolorem explicabo fuga
                illum incidunt itaque laboriosam magni necessitatibus numquam
                perspiciatis qui quis, quo recusandae, rerum similique temporibus
                tenetur!
                <br/>
                <br/>
                fugit laudantium repudiandae velit? Dicta dolorem explicabo fuga
                illum incidunt itaque laboriosam magni necessitatibus numquam
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum
                eius eligendi enim expedita ipsum iusto nemo, nisi perspiciatis
                quis vitae!
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab ad aspernatur aut deleniti doloremque eius eos eveniet, expedita facilis labore magni,
            </p>

        </div>
        <div className="pagination fixed bottom-0 left-0 right-0">
            <div className="active:bg-red-300 rounded-3xl">
                <ArrowLeftCircleIcon className="w-10 text-indigo-600"/>
            </div>

            <div className="active:bg-red-300 rounded-3xl">
                <ArrowRightCircleIcon className="w-10 text-indigo-600"/>
            </div>
        </div>
    </div>
)}