FAQ: How do I add a line break into a translation?

Entering a normal line break into a translation will not work in most cases. This is because HTML rendering collapses white space by default. If the author of the source text didn't intend translations to break onto multiple lines then you'll have to do some work.

If you want to know why entering <br> doesn't work then read the FAQ aboutHTML in translations. Line breaks are a special case, so we'll cover them here.

Example

Suppose you have a message in your theme footer, which prints as a single line. The author will have written something like the following in one of your theme's PHP templates:

<footer>
  <?php esc_html_e('Design by WickedCoolThemes Inc.','some-wicked-cool-theme') );?>
</footer>

This code prints out the current translation of the original (single line) source string. Let's say you want to 'translate' this with a second line of text. In the Loco Translate editor you just hit return and add your extra line so it looks like this:

Design by WickedCoolThemes Inc.
Content by MyAwesomeCompany Ltd.

Problem: Your line break does not render on your website.

As explained earlier, entering a <br> tag won't work either. There are hacks to force it, but adding HTML is not a good way to fix this. There is a much better way.

CSS fix

The way that HTML ignores line breaks can be controlled with the white-space CSS property. This makes it possible to force your translation to break when the developer didn't intend it to.

In your WordPress theme customizer (or wherever you normally edit CSS) you can add a style for just this element. For our example it could be this:

body > footer {
    white-space: pre-line;
}

The pre-line property value observes the normal treatment of white space, except that lines are broken at newline characters. Refer to the link above fore more detail on this.

Further help

CSS is not the only way to fix this. It's just a suggestion, and the simplest we know of.

The code above is only an example. Don't just copy it. You'll need to know how to target your specific translation using the appropriate CSS selectors. This is not something we can provide personal help with, but there's a lot of information out there to help you.

If you need further help writing CSS or modifying your theme, please check WordPress and CSS or ask on a general WordPress forum or on StackExchange.