pre标签用于保留文本原始格式,适合展示代码或日志;常与code标签结合使用,支持CSS样式控制,如字体、溢出处理和自动换行,提升可读性。

在HTML中,pre标签用于定义预格式化文本。浏览器会保留其中的空格、换行和制表符,不会像处理普通文本那样合并空白字符或忽略换行。这使得
标签非常适合展示代码片段、ASCII艺术、日志文件内容等需要保持原始格式的文本。pre标签的基本用法
使用
标签非常简单,只需将需要保留格式的文本放在与之间即可。这是 一段包含 多行和缩进 的文本上面的代码会原样显示文本中的换行和空格,不会被浏览器自动调整。
结合code标签展示代码
通常,pre标签会和code标签配合使用,以语义化地展示代码内容。
立即学习“前端免费学习笔记(深入)”;
function hello() { console.log("Hello, world!"); }这样不仅保留了代码的格式,还通过
code标签告诉浏览器这是一段代码,有助于SEO和可访问性。样式控制与注意事项
pre标签默认使用等宽字体(如Courier),但你可以通过CSS自定义样式:
- 设置字体:
font-family: 'Consolas', monospace; - 控制溢出:
overflow: auto;防止长文本撑破布局 - 添加边框或背景色提升可读性
注意:pre标签内的内容不会自动换行,若需实现文本自动换行,可添加CSS:
这是一段非常非常非常非常非常长的文本,会在容器边界处自动换行显示











