1

I have a large piece of text (5000,10,000) inside a

tag. I want to create a function which divides this text into it's sibling

tags according the height of the device.

So basically I'm making an e-book app, so there is a div of .chapters in which theres a p tag in which i will put chapter text in. I want a function that will divide this long text into it's sibling p tags so after that i can make a slide show.

the .chapter div has overflow:scroll propert on it.

<div class="chapters with-preview current-chapter">
                    <p class="0">
                        ...all the chapter content
                    </p>
                    <p class="1">
                        ...empty sibling divs
                    </p>
                    <p class="2">
                        ...empty sibling divs
                    </p>
 </div>
Himanshu Kapoor
  • 11
  • 1
  • This is what [CSS regions](https://vanseodesign.com/css/regions/) tries to solve. – evolutionxbox Jan 24 '22 at 08:21
  • `I want to create a function` - can you show us this function? – Professor Abronsius Jan 24 '22 at 08:25
  • @evolutionxbox Not much support still https://caniuse.com/css-regions – mplungjan Jan 24 '22 at 08:27
  • Welcome to Stack Overflow! Visit the [help], take the [tour] to see what and [ask]. If you get stuck, post a [mcve] of your attempt, noting input and expected output using the [`[<>]`](https://meta.stackoverflow.com/questions/358992/ive-been-told-to-create-a-runnable-example-with-stack-snippets-how-do-i-do) snippet editor. – mplungjan Jan 24 '22 at 08:27
  • This has a few answers and suggestions on the topic: https://stackoverflow.com/questions/7400174/continuing-overflowed-text-in-a-different-div If you don't want to include external dependencies, you will have to read the chapter element height and height of your ```

    ``` elements and compare them. I have not found a lot on this, but i assume looping over your string(s) by word is a solution. If p exceeds chapter height, return from the loop and continue in a next chapter.

     – Shrimp Jan 24 '22 at 08:36
  • 2
    @mplungjan - Like CSS Exclusions, CSS Regions was a Microsoft initiative that got little to no traction with any of the other browser makers. A shame, since both are excellent ideas. – Alohci Jan 24 '22 at 08:40

0 Answers0