Center text on page, while still overflowing

OL Connect Professional Designer
1

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” >
LETTER BODY

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

2

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.

3

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?

4

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.

5

Progress!

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

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.

6

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

7

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

1 Like