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
基本上就这些。只要你想让网页显示的文字“怎么写的就怎么呈现”，
就是最简单直接的方法。不复杂但容易忽略细节，掌握它对展示结构化文本很有帮助。
以上就是HTML预格式化文本pre_HTML保留格式文本显示方法的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1587066.html
微信扫一扫 
支付宝扫一扫 
