0

I am using the following CSS to split a div's text in 2 columns :

.twocolumns {
 padding:10px;
  width:80%;
  -moz-column-count: 2;
  -moz-column-gap: 10px;
  -webkit-column-count: 2;
  -webkit-column-gap: 10px;
  column-count: 2;
  column-gap: 10px;
}

I am working in a magazine project, for which the text needs to be displayed in multiple pages(A4). I was wondering if with some extra CSS I can make the content, when it gets to the bottom of the page(overflow), to continue in another div ("page"). Is that possible?

Flezcano
  • 1,647
  • 5
  • 22
  • 39
  • 2
    I don't think the overflow property is what you'd be seeking here, as it would only really "work" if the bounds of the text on the two pages were adjacent. Otherwise you'll be adding arbitrary spacing (as opposed to simply breaking up the text based on a length limit / text formatting algo) – Rogue Jun 02 '22 at 13:12
  • Does this answer your question? [Break long text into
    elements on client-side](https://stackoverflow.com/questions/8145910/break-long-text-into-div-elements-on-client-side)
     – SMAKSS Jun 02 '22 at 13:15
  • @SMAKSS not really. My content is not only text, but also images , and some titles (h1,h2,h3) – Flezcano Jun 02 '22 at 13:17
  • @Flezcano i just came across this post https://stackoverflow.com/questions/54980382/split-html-into-virtual-pages. Does it help at all? – Thanos Jun 02 '22 at 13:23
  • @Thanos I will take a look but does not really look good since I am working with react. Also, seems kind of complicated to try to replicate that logic in react (with components , renders, etc...) Do you think that would be the best solution? – Flezcano Jun 02 '22 at 13:32
  • 1
    @Flezcano To be honest I don't think that would be the best solution since the author himself said that it is a naive approach.On the other hand it works and I don't believe that some simple css could do the trick . You could try and build a component especially for that purpose, landing the html and use `getBoundingClientRect` to find the overflowing content. I can't think of any easier way to do this although I might be wrong. – Thanos Jun 02 '22 at 13:41

0 Answers0