Insert a line break in rich text field

Content
1

Hi! This shoud be easy…

How can I insert a line break in the middle of a rich text field content?

Thanks!

2

Hey @Lolo_Riazzo,

Can you please try adding <br> and check?

Thanks,
Sunny

3

I already tried it and it doesn’t work, whether you insert it as text or as “insert code block” (I am not sure what this last option is for)

Is there no other way to do the line break?

4

Hi @Lolo_Riazzo,

I’m Jacob with Yext Developer Support. Could you share a screenshot of your rich text and the resulting content? While \n is typically a valid way to enter an HTML line break, rich text—as far as I understand—only supports <br> for line breaks. In fact, in HTML 5, variations such as as <br/> or <br />, and I believe even \n, get parsed as <br>.

Thanks for your patience! Hoping we can get this solved for you.

Best,
Jacob

5

I have tried different ways, without success
This would be as you have indicated, although I have also tried to insert it as code block.Maybe it would be easier if you provide a screenshot with a working example.

image
image1582×101 19.9 KB

image
image863×193 25 KB

Thank you very much.

6

Hi Lolo,

Are you updating your rich text field via API or within the UI?

If you are updating via the UI (which it looks like you are based on your screenshots), you should be able to add a line break by simply pressing the Enter or Return key when typing your content.

When updating via API, the method in which you send a line break to us within your content depends on if you are sending us rich text content in Markdown or HTML format. If sending via Markdown, you should use \n to represent a line break. If sending via HTML, you should use <br> to represent a line break.

If you are looking to separate your content into paragraphs with extra spacing (similar to what I’m doing in this post), you may want to use multiple consecutive line breaks (e.g. \n\n for markdown or <br><br> for HTML).

Let me know if this works for you, or if anything here needs further clarification!

Best,
Fed

1 Like
7

I have been doing more tests.
Indeed, what I need is extra spacing.

We can’t use the API upload in this project, and we work directly with the UI or by uploading a CSV file.

UI
The enter key works for single spacing, but not for double spacing. The double spacing appears in the UI, but in the frontend of the page it is shown as single.

CSV
I have tried marking the double-spacing as \n\n and as <br><br> to later, during the upload, indicate that it should be interpreted as markdown or html respectively.

The result is the same: The frontend of the page shows a single spacing.

Somehow, the double spacing is overridden.

8

Hi Lolo,

We have identified the issue here. It appears that the default styling provided in the Page Builder Page Template is being overridden by a custom stylesheet, therefore for new paragraphs, we aren’t adding the necessary spacing after each paragraph element to represent line breaks.

To resolve this, in your text block module within Page Builder, you should add the following CSS to the module containing the rich text field content:

p {
  margin-bottom: 1rem;
}

In case you are unsure of how to access the relevant CSS in Page Builder, from the Content tab, you can select the module containing the rich text. Your left sidebar should update to look like the screenshot below. From here, click on the “Edit CSS” link to be taken to the code editor, and then you can copy and paste the above code snippet to the end of that and Save.

image

Let me know if this works for you, or if anything needs further clarification!

Best,
Fed

1 Like
9

Solved, thank you!

It’s weird, because I also tested with a text block without custom CSS, and the double spacing didn’t show up either.

That code finally worked.