[AlexanderKrieger Has successfully completed the online course Intermediate (200)Has successfully completed the online course Advanced (300)Has successfully completed the online course Basics (100)Has successfully completed the online course Advanced (310)Has successfully completed the online course Advanced (320)]

2 years ago #35422

Hello,

how do I enable linebreaks for a div when printing with multiple lines coming from a Field-Variable?

Using “div” into “pre” creates huge paddings on the top and bottom side of the text.

I cannot seem to be able to remove it by setting those to 0.

Example: “Lorem ipsum do

lor sit amet,

consetetur sadipscing elitr,

sed diam nonumy eirmod tempor invidunt ut labore

et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.”

 

In the PDF it looks like this:

“Lorem ipsum dolor sit amet, consetetur sadipscing elitr,sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,seddiam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.”

 

[Jennifer Häfner Has successfully completed the online course Intermediate (200)Has successfully completed the online course Advanced (300)Has successfully completed the online course Basics (100)Has successfully completed the online course Advanced (310)Has successfully completed the online course Advanced (320)Has successfully completed the Intermediate CertificationHas successfully completed the Advanced Certification]

2 years ago #36547

Up

0

Down

::

Hi Alex,

You can remove the margin between <div> and <pre> with this CSS adaptation:

pre {
margin: 0;
}

Another option, although I’m not sure if this is too much of a workaround for your use case, is to convert the lines of the text to an array, with each object containing a line:

{
"lines":
[
{"line": "Lorem ipsum do"},
{"line": "lor sit amet,"},
{"line": "consetetur sadipscing elitr,"},
{"line": "sed diam nonumy eirmod tempor invidunt ut labore"},
{"line": "et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores"},
{"line": " et ea rebum."}
]
}

Then, in the body of the template, you can iterate over the lines and create a new div for each line:

{{#lines}}
<div>{{line}}
</div>
{{/lines}}