Center text on page, while still overflowing

Hello, I am trying to have text placed on the page to be both vertically centered on the page but then wrapped onto a second page if it becomes too long. So far I seem to be only able to do one or the other but not both.

I have been using the following CSS and HTML which contains the text:

#LetterBodyHolder {
display: flex ;
flex-direction: row ;
align-items: center ;
<div id= “LetterBodyHolder” style=" width: 7.5in ; height: 7.5in ;">
<div id= “BodyPara” class= “BodyPara” >

The Letterbody is being replaced by a script. Currently, if there is too much text, it stretches above and below the page rather than breaking too a new page. I assume this is because of being contained within the DIV being used to center.

Any insight would be appreciated

Hello @SamSorenson, can you also please share this script? Because then we can think along whether what you would like to achieve can be realised.

Interesting case. Where is the text coming from? Is it provided as one “snippet” of text or perhaps rows in a detail table? What is the format of the letterbody, is it HTML?

example.OL-datamapper (10.4 KB) example.OL-template (23.4 KB)

Attached are some trimmed-down versions of the files I am using. I know the letter body won’t wrap as is because it is inside an absolute object. but this was the only way I could find so far that would allow me to center the text vertically on the page Removing it from the absolute div makes it wrap from top to bottom normally.

I am trying to create a Photo-book-esque experience with user-generated text and want the text to have a good appearance in the middle of the page. However, because it is user-generated with a character limit that will most likely be able to go over a single page, I am trying to build in the contingencies for it.


<table id= *"LetterBodyHolder"* data-column-resize= *""* data-hide-when-empty= *""* data-detail= *""* style="height: *7.5in* ; width : *100%* " data-expander= *"2019"* >
<tr data-repeat= *"lettertext"* >
<td style="text-align: *center* ; width: *99.45%* ;">{{textRow}}</td>

Splitting the text on the <br> in the data, loading it into a table and then displaying it using the above HTML is getting me much closer to what i was looking for.

Can you wrap what you wanted to share in backtick (`) characters please?

Apologies didn’t realize that formatting error occured. Updated the post now, was <br>

1 Like