Символ возврата каретки не отображает HTML

Question

Символ возврата каретки не отображает HTML

0

У меня есть угловой контроллер, который извлекает данные из спокойного api и подает его на HTML-страницу. Среди многих полей один из них - фактически текст (который поступает от сетевого устройства), который является списком Filename: Filedata. Filedata - фактически форматированные данные. Пример данных:

'AGGR-STATUS-V.txt': 'Aggr State Status Options\r\n aggr root, nosnap=off, \r\n mirrored, \r\n 32-bit, \r\n, \r\n, \r\n no_delete_log=off, \r\n hybrid_enabled=off, \r\n, \r\n thorough_scrub=off\r\n\r\n\t\tVolumes: vol0\r\n\r\n Plex/aggr0/plex0: online, normal, active\r\n RAID group/aggr0/plex/: normal, block checksums\r\n\r\n Plex/aggr0/plex2: online, active\r\n, block checksums\r\n\r\n, \r\n mirrored raid_lost_write=on, ignore_inconsistent=off, \r\n 32-bit snapmirrored=off, resyncsnaptime=60, \r\n rlw_on fs_size_fixed=off, \r\n, no_delete_log=off, \r\n, \r\n, \r\n free_space_realloc=off, raid_cv=on, \r\n thorough_scrub=off\r\n\r\n\t\tVolumes: vol1, nk_srvtreasury03, nk_srvtreasury04\r\n\r\n Plex/aggr1/plex0: online, normal, active\r\n RAID group/aggr1/plex0/rg0: normal, block checksums\r\n RAID group/aggr1/plex0/rg1: normal, block checksums\r\n\r\n Plex/aggr1/plex1: online, normal, active\r\n RAID group/aggr1/plex1/rg0: normal, block checksums\r\n RAID group/aggr1/plex1/rg1: normal, block checksums\r\n\r\n aggr2 online raid_dp, aggr nosnap=off, raidtype=raid_dp, raidsize=11, \r\n mirrored raid_lost_write=on, ignore_inconsistent=off, \r\n 32-bit snapmirrored=off, resyncsnaptime=60, \r\n rlw_on fs_size_fixed=off, snapshot_autodelete=on, \r\n lost_write_protect=on, no_delete_log=off, \r\n ha_policy=cfo, hybrid_enabled=off, \r\n percent_snapshot_space=5%, \r\n free_space_realloc=off, raid_cv=on, \r\n thorough_scrub=off\r\n\r\n\t\tVolumes: vol2, st_srvtreasury03, st_srvtreasury04\r\n\r\n Plex/aggr2/plex0: online, normal, active\r\n RAID group/aggr2/plex0/rg0: normal, block checksums\r\n RAID group/aggr2/plex0/rg1: normal, block checksums\r\n\r\n Plex/aggr2/plex1: online, normal, active\r\n RAID group/aggr2/plex1/rg0: normal, block checksums\r\n RAID group/aggr2/plex1/rg1: normal, block checksums\r\n\r\n'

Это переменная в angularjs ({{vm.alert.alerts}}) и отображается так же, как на странице HTML. Я хочу, чтобы HTML соблюдал возврат каретки и новую строку и вкладки. До сих пор я пробовал предыдущий <pre><code></pre></code>. Но не смогли правильно отобразить его. Пожалуйста помоги!

Chandana Mutgi 01 авг. 2016, в 09:33

Источник

Теги:

html

angularjs

jhipster

1 ответ

Ещё вопросы

Steve Davis · Answer 1 · 2016-08-01T21-18-00.000Z

Нет необходимости в тегах <pre>. Вы можете стирать разрывы строк с помощью атрибута white-space:pre-wrap css.

<code style="white-space:pre-wrap;">{{vm.alert.alerts}}</code>

Хотя лучше иметь класс CSS вместо встроенных стилей.

<code class="pre-wrapped">{{vm.alert.alerts}}</code>

/* in the css file */
.pre-wrapped {
    white-space: pre-wrap;
}

Я пробовал только с white-space:pre-wrap; хотя это немного лучше читать, он по-прежнему отображает \r\n и \t как просто символы
Я использовал Jhipster, чтобы подмостить свое приложение, если это имеет значение. (Я знаю, что они возятся с файлами CSS, не знаю, что искать)
Возможно, попробуйте <p class="pre-wrapped" ng-bind-html="vm.alert.alerts"></p> если вы используете angular 1.x, из памяти вам нужно будет включить ngSanitize.