回车符不呈现HTML

Question

我有一个angular控制器，它从restful api中提取数据并将其提供给HTML页面。在众多字段中，其中一个实际上是文本(来自网络设备)，它是FilenameFiledata的列表。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支持回车符、换行符和制表符。到目前为止，我已经在<pre><code></pre></code>之前尝试过了。但一直无法正确显示它。请帮帮我！

Answer 1

不需要<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;
}