Question

我有一个角度控制器，可以将数据从一个安静的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>。但是无法正确显示它。请帮忙！

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

回车符不呈现HTML

1 个答案: