pre标签用于保留文本原始格式，适合展示代码或日志；常与code标签结合使用，支持CSS样式控制，如字体、溢出处理和自动换行，提升可读性。
在HTML中，pre标签用于定义预格式化文本。浏览器会保留其中的空格、换行和制表符，不会像处理普通文本那样合并空白字符或忽略换行。这使得
标签非常适合展示代码片段、ASCII艺术、日志文件内容等需要保持原始格式的文本。</p>
<H3>pre标签的基本用法</H3>
<p>使用<pre class="brush:php;toolbar:false;">标签非常简单，只需将需要保留格式的文本放在<pre>与</pre>之间即可。</p>
<font face="Courier New">
<pre class="brush:php;toolbar:false;">
这是
一段包含
多行和缩进
的文本
上面的代码会原样显示文本中的换行和空格，不会被浏览器自动调整。
通常，pre标签会和code标签配合使用，以语义化地展示代码内容。
立即学习“前端免费学习笔记（深入）”；
function hello() {
console.log("Hello, world!");
}
这样不仅保留了代码的格式，还通过code标签告诉浏览器这是一段代码，有助于SEO和可访问性。
pre标签默认使用等宽字体（如Courier），但你可以通过CSS自定义样式：
font-family: 'Consolas', monospace;
overflow: auto; 防止长文本撑破布局注意：pre标签内的内容不会自动换行，若需实现文本自动换行，可添加CSS：
这是一段非常非常非常非常非常长的文本，会在容器边界处自动换行显示
基本上就这些。pre标签是前端开发中展示结构化文本的实用工具，合理使用能有效提升内容可读性。
以上就是HTML预格式化文本标签_HTML pre标签保留格式文本显示的详细内容，更多请关注php中文网其它相关文章！
HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
449
收藏
