Новая линия и вкладки добавляются к моей строке в угловом

Question

У меня есть следующий DIV в моем HTML:

<div flex style="white-space:pre-wrap;"> 
    {{c.display}} 
</div> 

c.displayустанавливаются следующим образом:

$scope.c.display = "foo\nbar\n\tfoobar"; 

Выхода выглядит так:

Источник HTML выглядит следующим образом:

Если изменить источник на Chrome с помощью средства разработки для этого:

I получить то, что я хотел все это время:

Итак, почему это происходит и как я могу это остановить?

Answer 1

Как насчет удаления белого пространства из div?

<div flex style="white-space:pre-wrap;">{{c.display}}</div>