Сохранять разрывы строк в angularjs

Ответ 1

Основываясь на ответе @pilau, но с улучшением, которое даже принятый ответ не имеет.

<div class="angular-with-newlines" ng-repeat="item in items">
   {{item.description}}
</div>

/* in the css file or in a style block */
.angular-with-newlines {
    white-space: pre-wrap;
}

Это будет использовать новые строки и пробелы, как указано, но также разбить контент на границах содержимого. Более подробную информацию о свойствах белого пространства можно найти здесь:

https://developer.mozilla.org/en-US/docs/Web/CSS/white-space

Если вы хотите сломать новые строки, но также свернуть несколько пробелов или пробел перед текстом (очень похоже на исходное поведение браузера), вы можете использовать, как предположил @aaki:

white-space: pre-line;

Хорошее сравнение различных режимов рендеринга: http://meyerweb.com/eric/css/tests/white-space.html

Ответ 2

Try:

<div ng-repeat="item in items">
  <pre>{{item.description}}</pre>
</div>

Оболочка <pre> будет печатать текст с \n как текст

также, если вы печатаете json, для лучшего использования используйте фильтр json, например:

<div ng-repeat="item in items">
  <pre>{{item.description|json}}</pre>
</div>

Демо

Я согласен с @Paul Weber, что white-space: pre-wrap; лучше подходит, в любом случае используя <pre> - быстрый способ в основном отлаживать некоторые вещи (если вы не хотите тратить время на стилизацию)

Ответ 3

Это так просто с CSS (он работает, я клянусь).

.angular-with-newlines {
  white-space: pre;
}

• Посмотри ма! Нет дополнительных HTML-тегов!

Ответ 4

С CSS это может быть легко достигнуто.

<div ng-repeat="item in items">
<span style="white-space:pre-wrap;"> {{item.description}}</span>
</div>  

Или для этого может быть создан класс CSS и может использоваться из внешнего файла CSS

Ответ 5

Ну, это зависит, если вы хотите привязать данные, там не должно быть никакого форматирования, иначе вы можете bind-html и сделать description.replace(/\\n/g, '<br>') не уверен, что вы хотите.

Ответ 6

решение css работает, однако вы не получаете контроля над стилем. В моем случае я хотел немного больше пространства после разрыва строки. Вот директива, которую я создал для обработки этого (typescript):

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);

Использование:

<div class="pre">{{item.description}}</div>

Все, что он делает, обертывает каждую часть текста тегом <p>. После этого вы можете стилизовать его, как хотите.

Ответ 7

Да, я бы либо использовал тег <pre>, либо использовал ng-bind-html-unsafe http://docs-angularjs-org-dev.appspot.com/api/ng.directive:ngBindHtmlUnsafe (используйте ng-bind-html, если вы используют 1.2+) после использования .replace() для изменения /n до <br />

Ответ 8

Просто используйте CSS-стиль "white-space: pre-wrap", и вам должно быть хорошо идти. У меня была такая же проблема, когда мне нужно обрабатывать сообщения об ошибках, для которых разрыв строки и пробелы являются действительно конкретными. Я просто добавил этот inline, где я привязывал данные, и он работает как Charm!

Ответ 9

У меня была похожая проблема с тобой. Я не очень заинтересован в других ответах здесь, потому что они не позволяют вам очень легко стилизовать поведение новой строки. Я не уверен, что у вас есть контроль над исходными данными, но я принял решение переключить "элементы" с массива строк на массив массивов, где каждый элемент во втором массиве содержал строку текста., Таким образом, вы можете сделать что-то вроде:

<div ng-repeat="item in items">
  <p ng-repeat="para in item.description">
     {{para}}
  </p>
</div>

Таким образом, вы можете применять классы к абзацам и красиво оформлять их с помощью CSS.

Ответ 10

Просто добавьте это к своим стилям, это работает для меня

white-space: pre-wrap

Этот текст в <textarea> может отображаться как он там с пробелами и линейными тормозами

HTML

   <p class="text-style">{{product?.description}}</p>

CSS

.text-style{
    white-space: pre-wrap
}