a solução css funciona, no entanto, você realmente não tem controle sobre o estilo. No meu caso, eu queria um pouco mais de espaço após a quebra de linha. Aqui está uma diretiva que eu criei para lidar com isso (texto datilografado):
function preDirective(): angular.IDirective {
return {
restrict: 'C',
priority: 450,
link: (scope, el, attr, ctrl) => {
scope.$watch(
() => el[0].innerHTML,
(newVal) => {
let lineBreakIndex = newVal.indexOf('\n');
if (lineBreakIndex > -1 && lineBreakIndex !== newVal.length - 1 && newVal.substr(lineBreakIndex + 1, 4) != '</p>') {
let newHtml = `<p>${replaceAll(el[0].innerHTML, '\n\n', '\n').split('\n').join('</p><p>')}</p>`;
el[0].innerHTML = newHtml;
}
}
)
}
};
function replaceAll(str, find, replace) {
return str.replace(new RegExp(escapeRegExp(find), 'g'), replace);
}
function escapeRegExp(str) {
return str.replace(/([.*+?^=!:${}()|\[\]\/\\])/g, "\\$1");
}
}
angular.module('app').directive('pre', preDirective);
Usar:
<div class="pre">{{item.description}}</div>
Tudo o que faz é agrupar cada parte do texto em uma <p>
tag. Depois disso, você pode modelá-lo como quiser.