put new line in string to translate

angular translation ngx-translate

Lev · Aug 22, 2017 · Viewed 14.7k times · Source

I'm using ngx-translate.

How can I put a line break in a string to translate ?

In my template I have :

{{'STRING_TO_TRANSLATE' | translate}}

In my en.json:

{
"STRING_TO_TRANSLATE": "text on first line. <br> or \n don't work. Text on second line"
}

Answer

You can use \n but you will have to provide some styling.

So in your template use this:

<div class="my-translated-paragraph">
    {{'STRING_TO_TRANSLATE' | translate}}
</div>

Your en.json:

{
"STRING_TO_TRANSLATE": "text on first line.\nText on second line"
}

Your (s)CSS file:

.my-translated-paragraph{
    white-space: pre-wrap;
}