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


176

Я видел этот ТАК вопрос.

Мой код вместо того, чтобы ng-bind="item.desc"использовать, {{item.desc}}потому что у меня есть ng-repeatраньше.

Итак, мой код:

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

Описание элемента содержит \nновые строки, которые не отображаются.

Как можно {{item.description}}легко отображать переводы строки, если предположить, что у меня есть ng-repeatвышеуказанное?


Поместить его в тег <pre>?
AET

88
Укладывая обертку divс помощью style="white-space:pre-wrap;".
Стьюи

1
Комментарий @Stewie отлично работает для меня (AngularJS 1.2.18), он явно показывает, как стилизовать отдельный элемент (в отличие от решения Пилау и Пола Вебера) и нет необходимости изменять стили тега <pre> как другие предложил.
Андре Хольцнер,

Вы правы, я предположил, что все знают, как использовать базовые CSS и применять класс к элементу. Если бы Стьюи отправил свой комментарий как ответ, для него было бы лучше. Хотя кажется, что у него достаточно очков ...
Пол Вебер

Я согласен, @Stewie определенно должен был отформатировать свой комментарий как ответ. Это исправило мою проблему отлично.
CF_HoneyBadger

Ответы:


285

Основано на ответе @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


1
Лучшее решение здесь - IMO, так как оно не переходит на моноширинный шрифт, как pre.
Троэльс Ларсен

1
Посмотрите пробел, предшествующий тексту, который будет сохранен.
Серебряный Паладин

1
Так как ты поднял это, не будет pre-lineпредпочтительным? Это ближе к тому, как HTML обычно отображает текстовое содержимое своих узлов и сохраняет строки.
aaki

Хм ... вы правы, предварительная линия - лучшее решение, после того как я больше не уверен, почему я выбираю предварительную упаковку вместо предварительной. Может быть, поддержка браузера для pre-line не так хороша? Но я добавлю это к ответу ... Вот сравнение визуализаций: meyerweb.com/eric/css/tests/white-space.html
Пол Вебер

Это должен быть принятый ответ! pre-lineэто путь Спасибо, Пол!
demisx

126

Пытаться:

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

Demo

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


Item.description - это текст, в котором есть \nобласти, которые я не знаю, но не в конце. Я думаю, что мне нужно на preоснове вашего редактирования.
Диолор

29
Часто тег <pre> не является хорошим решением, поскольку он превращает текст в курьера и нарушает стиль страницы. Стиль = "пустое пространство: предварительная упаковка;" решение кажется лучшим решением (по крайней мере, для моей ситуации)
CF_HoneyBadger

1
@CF_HoneyBadger хорошо, потому что вы @pilauответ правильный, но это не значит, что мой неправильный, и поэтому я получил отрицательный голос
Максим Шустин

Я попытался преобразовать все \nв <br/>, и тогда, конечно, эти теги не отображались как разметка HTML ... после того, как это преобразование нашло ваше styleрешение, и это невероятная помощь и упрощение ... теперь я не Я должен постоянно конвертировать все мои внутренние данные и просто внести несколько изменений в представление ... Вы заслуживаете +1000!
17

Это работает для кода, но не для показа сообщений пользователям, например. Я думаю, что ответ Павла правильный
Куинтонн

63

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

.angular-with-newlines {
  white-space: pre;
}
  • Смотри, мама! Нет лишних тегов HTML!

@pilau Я хочу обернуть текст, если он содержит запятую (,), а не пробел, как я могу это сделать?
Шилендра Мадда

@shylendra мое решение не переносит текст, оно заставляет его вести себя так, как если бы оно было в preтеге. Возможно открыть еще один вопрос? Или, может быть, я упустил вашу точку зрения?
Пилау

Мне было интересно о совместимости браузера. Согласно этому графику, он работает во всех основных браузерах. Это намного меньше хлопот, чем замена новых строк тегами br. Спасибо! Просто обратите внимание на форматирование кода, чтобы он не содержал пробелов, они, конечно же, будут отображаться. developer.mozilla.org/en-US/docs/Web/CSS/white-space
Пол Вебер

Может быть, даже лучше использовать пробел: предварительная переноска, иначе содержимое никогда не будет переноситься.
Пол Вебер

16

С помощью CSS этого можно легко достичь.

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

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


2

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


1

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

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>тег. После этого вы можете стилизовать его как хотите.


1

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

white-space: pre-wrap

По этому тексту <textarea>можно отображать пробелы и линейные тормоза

HTML

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

CSS

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


0

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


0

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

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

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

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.