如何在HTML中原样显示文本内容包括换行符但忽略转义序列

在HTML页面中展示文本时，默认渲染规则会合并连续的空格、换行符，还会将特殊字符如<、>解析为HTML标签的一部分，导致文本原本的格式丢失。如果我们需要原样显示文本内容，同时保留换行符，又不需要解析转义序列，就需要使用特定的HTML标签和处理方式。

使用pre标签实现基础原样显示

<pre>标签是HTML中专门用于预格式化文本的标签，它会保留文本中的所有空白字符、换行符，同时使用等宽字体渲染内容，非常适合展示需要保留格式的文本内容。

默认情况下，<pre>标签会原样输出所有内容，包括HTML标签的转义序列，不过如果内容中包含未转义的特殊字符，浏览器还是会解析这些字符。如果我们需要忽略转义序列，也就是让<、>这类字符直接显示为文本，就需要对内容中的特殊字符进行转义处理。

<!-- 原样显示文本的基础示例 -->
<pre>
这是第一行内容
这是第二行内容，前面有两个空格
<div>这个div标签不会被解析，会直接显示出来</div>
</pre>

上面的代码中，<pre>标签内部的内容会完全按照书写的格式展示，换行符会被保留，<div>标签也会作为普通文本显示，不会被浏览器解析为HTML元素。

对动态内容进行转义处理

如果我们的文本内容是从后端接口获取或者用户输入的动态内容，直接在<pre>标签中输出可能存在安全风险，比如输入内容包含恶意脚本，也可能导致格式异常。这时候需要先将内容中的特殊字符进行转义，再插入到<pre>标签中。

下面是一个JavaScript转义特殊字符的示例，将<、>、&等字符转换为对应的HTML实体：

// 转义HTML特殊字符的函数
function escapeHtml(text) {
    const map = {
        '&': '&',
        '<': '<',
        '>': '>',
        '"': '"',
        "'": '''
    };
    return text.replace(/[&<>"']/g, function(m) { return map[m]; });
}

// 待展示的原始文本，包含换行和特殊字符
const rawText = `第一行内容
第二行内容，包含
标签和&符号
第三行内容`;
// 转义后插入到pre标签中
document.getElementById('contentPre').textContent = escapeHtml(rawText);

这里使用textContent属性而不是innerHTML来设置内容，textContent会自动将内容作为纯文本处理，不会解析其中的HTML标签，配合转义函数可以安全地原样展示所有内容。

使用CSS的white-space属性适配更多场景

如果不想使用<pre>标签的等宽字体和默认样式，也可以使用普通标签配合CSS的white-space属性来实现原样显示文本的效果。white-space: pre-wrap可以保留文本中的换行符和空白字符，同时允许内容自动换行，避免内容溢出容器。

<!-- 使用div配合CSS实现原样显示 -->
<style>
.text-content {
    white-space: pre-wrap;
    font-family: 微软雅黑, sans-serif;
    padding: 10px;
    border: 1px solid #eee;
}
</style>

<div class="text-content" id="customText"></div>

<script>
// 同样使用转义后的内容赋值
const rawText = `用户留言内容：
1. 希望增加导出功能
2. 页面加载速度有点慢
3. 提交按钮偶尔无响应`;
document.getElementById('customText').textContent = escapeHtml(rawText);
</script>

不同white-space属性值的效果对比

不同的white-space属性值对文本的处理规则不同，我们可以根据实际需求选择：

注意事项

• 如果内容中包含大量连续空格，使用pre-wrap或者<pre>标签时需要注意容器的宽度，避免内容横向溢出影响页面布局。
• 动态渲染内容时，优先使用textContent赋值，避免直接使用innerHTML插入未转义的内容，防止XSS攻击。
• 如果需要在原样显示的文本中支持部分HTML格式，比如加粗、链接，就不能完全转义所有特殊字符，这时候需要单独处理允许出现的标签，过滤掉其他危险标签。

原样显示文本的核心是保留空白字符和换行，同时避免浏览器解析内容中的HTML标签，根据实际场景选择<pre>标签或者CSS的white-space属性，配合内容转义处理，就可以满足大部分展示需求。

HTMLpre标签white_space文本转义换行符修改时间：2026-06-14 08:57:15