HTML预格式化文本pre_HTML保留格式文本显示方法

pre标签用于保留文本原有格式,包括空格、换行和缩进,常用于显示代码、日志或ASCII艺术,需用和包裹内容,浏览器会以等宽字体原样呈现。

在HTML中,想要保留文本原有的格式(比如空格、换行、缩进),可以使用

 标签。这个标签的作用是告诉浏览器:按照文本原本的样子显示内容,不要忽略多余的空格和换行。

什么是 pre 标签?

 是 "preformatted text" 的缩写,表示“预格式化文本”。浏览器在渲染时会保留其中的:

  • 空格(包括多个连续空格)
  • 换行符(回车)
  • 制表符(Tab 缩进)

通常浏览器会用等宽字体(如 Courier)显示

 中的内容,便于对齐和代码展示。

如何使用 pre 标签?

只需要把需要保持格式的文本放在

之间即可:

这是第一行
    这行前面有四个空格
        更多缩进
连续    多个    空格

上面的代码会原样显示缩进、空行和空格,不会被浏览器合并或忽略。

常见用途示例

1. 显示代码片段:

function hello() {
    console.log("Hello, world!");
}

2. 展示日志或命令输出:

Starting server...
[OK] Port 3000 is available.
[INFO] Listening on http://localhost:3000

3. ASCII 艺术或表格对齐:

+-----------------+---------+
| Name            | Age     |
+-----------------+---------+
| Alice           | 25      |
| Bob             | 30      |
+-----------------+---------+

注意事项

虽然

 保留格式,但仍有几点需要注意:

  • 仍可结合 CSS 修改字体、颜色、背景等样式
  • 如果内容过长,可能超出容器,建议配合 overflow:auto 使用
  • 不能自动识别和高亮代码语法,如需美化代码可搭配 Prism.js 或 Highlight.js

基本上就这些。只要你想让网页显示的文字“怎么写的就怎么呈现”,

 就是最简单直接的方法。不复杂但容易忽略细节,掌握它对展示结构化文本很有帮助。