Я видел этот ТАК вопрос.
Мой код вместо того, чтобы ng-bind="item.desc"
использовать, {{item.desc}}
потому что у меня есть ng-repeat
раньше.
Итак, мой код:
<div ng-repeat="item in items">
{{item.description}}
</div>
Описание элемента содержит \n
новые строки, которые не отображаются.
Как можно {{item.description}}
легко отображать переводы строки, если предположить, что у меня есть ng-repeat
вышеуказанное?
angularjs
angularjs-ng-repeat
Diolor
источник
источник
div
с помощьюstyle="white-space:pre-wrap;"
.Ответы:
Основано на ответе @pilau - но с улучшением, которого нет даже в принятом ответе.
Это будет использовать новые строки и пробелы, как указано, но также нарушит содержимое на границах содержимого. Более подробную информацию о свойствах пробелов можно найти здесь:
https://developer.mozilla.org/en-US/docs/Web/CSS/white-space
Если вы хотите разбить символы новой строки, но также свернуть несколько пробелов или пробелов, предшествующих тексту (очень похоже на исходное поведение браузера), вы можете использовать, как предложено @aaki:
Хорошее сравнение различных режимов рендеринга: http://meyerweb.com/eric/css/tests/white-space.html
источник
pre-line
предпочтительным? Это ближе к тому, как HTML обычно отображает текстовое содержимое своих узлов и сохраняет строки.pre-line
это путь Спасибо, Пол!Пытаться:
<pre>
Обертка будет печатать текст с в\n
виде текстаТакже, если вы печатаете JSON, для лучшего вида используйте
json
фильтр, например:Demo
Я согласен с тем,
@Paul Weber
чтоwhite-space: pre-wrap;
это лучший подход, в любом случае, использование<pre>
- быстрый способ в основном для отладки некоторых вещей (если вы не хотите тратить время на стилизацию)источник
\n
области, которые я не знаю, но не в конце. Я думаю, что мне нужно наpre
основе вашего редактирования.@pilau
ответ правильный, но это не значит, что мой неправильный, и поэтому я получил отрицательный голос\n
в<br/>
, и тогда, конечно, эти теги не отображались как разметка HTML ... после того, как это преобразование нашло вашеstyle
решение, и это невероятная помощь и упрощение ... теперь я не Я должен постоянно конвертировать все мои внутренние данные и просто внести несколько изменений в представление ... Вы заслуживаете +1000!С CSS это так просто (работает, клянусь).
источник
pre
теге. Возможно открыть еще один вопрос? Или, может быть, я упустил вашу точку зрения?С помощью CSS этого можно легко достичь.
Или класс CSS может быть создан для этой цели и может использоваться из внешнего файла CSS
источник
Ну, это зависит, если вы хотите связать данные, в них не должно быть никакого форматирования, иначе вы можете
bind-html
иdescription.replace(/\\n/g, '<br>')
не уверены, что это то, что вы хотите.источник
Решение CSS работает, однако вы не можете контролировать стиль. В моем случае я хотел немного больше места после разрыва строки. Вот директива, которую я создал для обработки этого (машинопись):
Использование:
Все, что он делает - это оборачивает каждую часть текста в
<p>
тег. После этого вы можете стилизовать его как хотите.источник
Просто добавьте это к своим стилям, это работает для меня
По этому тексту
<textarea>
можно отображать пробелы и линейные тормозаHTML
CSS
источник
Да, я бы либо использовал
<pre>
тег, либо использовалng-bind-html-unsafe
http://docs-angularjs-org-dev.appspot.com/api/ng.directive:ngBindHtmlUnsafe (используйте ng-bind-html, если вы используете 1.2+) после использования.replace()
для изменить/n
на<br />
источник
ng-bind-html-unsafe
устарелаПросто используйте стиль CSS «white-space: pre-wrap», и все будет хорошо. У меня была та же проблема, когда мне нужно было обрабатывать сообщения об ошибках, для которых действительно характерны разрывы строк и пробелы. Я только что добавил эту строку, где я связывал данные, и она работает как Charm!
источник
У меня была похожая проблема с тобой. Я не очень заинтересован в других ответах здесь, потому что они не позволяют вам очень легко стилизовать поведение новой строки. Я не уверен, что у вас есть контроль над исходными данными, но я принял решение переключить «элементы» с массива строк на массив массивов, где каждый элемент во втором массиве содержал строку текста. , Таким образом, вы можете сделать что-то вроде:
Таким образом, вы можете применять классы к абзацам и красиво оформлять их с помощью CSS.
источник