JSON to HTML with breaklines, angular-translate

Question

I'm using Angular-translate and I am trying to load a text from JSON with breakline, but the html is not recognizing.

JSON:

"ABOUT": {
    "headline":"Every day\n every moment",
    "span": "Be Like"
}

ANGULARJS:

.config(function($translateProvider) {

// Sanitize
$translateProvider.useSanitizeValueStrategy('escaped');

// Load  JSON
$translateProvider.useStaticFilesLoader({
    prefix: '/app/languages/app-',
    suffix: '.json'
});
$translateProvider.preferredLanguage('en');

HTML:

        <h2> <span>{{ 'ABOUT.span' | translate }}</span>
        {{ 'ABOUT.headline' | translate }}
       ....

Is there some way to do that?

Answer 1

Use white-space:pre; in css so it would be like that in your html

<h2 style="white-space:pre;"> <span>{{ 'ABOUT.span' | translate }}</span>{{ 'ABOUT.headline' | translate }} </h2>

here is a plunker http://plnkr.co/edit/Bjs6LC9Z9Fy1v5ULqlVW?p=preview