Display line-breaks from dynamic data

[kontakt.youare]

Hey there,

I am reaching out with a problem I have with displaying line-breaks from multiline input fields. On our website, users can edit their own profile texts using multiline inputs. You can insert paragraphs using the ENTER-key and the system also saves the data like that (as displayed in the input field).

Now, users on our platform can access other user’s profile to see the information. The following screenshot shows, how we display that data.

However, on those profile pages, line-breaks are not displayed anymore.

As you can see in the source code of the picture above, there are actually 2 divs after each “paragraph”. I tried finding a workaround by adding code to the CSShead when page is loading (I have some data in there for automatic hyphenation). However, when adding following code to the CSS body “white-space: pre-line;” I actually start having a double-spaced paragraph.

Please help me out as our users are complaining about the displaying of their data. @eve

Thanks a lot!

Markus

[kontakt.youare]

Any feedback on that? @emmanuel

[eazycode]

Hey @kontakt.youare

Did you tried to switch off shrinking ?

[kontakt.youare]

Hey @eazycode,

thanks for your reply! I switched of the shrinking element’s height, but that doesn’t do anything. It appears to me that the problem lies in the two fivs after each paragraph that do not allow a normal paragraphing with one free line in between. Any other idea?

[kontakt.youare]

Actually, after not having found a solution for such a long time, I just did

So, I deleted the “[justify]” in each text field. In the workflow, I inserted a “When page is loaded”, then “Add Custom Style To Head CSSTools A” workflow. Besides having a workaround for automatic hyphenations for each browser, I also added three rules for paragraphing and justifying in there. See here:

Now, everything looks like it’s supposed to