HTML怎么排版保留空格格式的文字-html教程-PHP中文网

浏览器默认压缩空白符，需用、white-space、或四类手段保留；原样输出适合代码等预格式化文本，white-space属性更灵活可嵌入任意标签，用于少量空格，仅控制换行。

html怎么排版保留空格格式的文字

浏览器默认会把多个空格、制表符、换行符全压缩成一个空格，所以直接敲空格或回车没用——想原样保留，得用 <pre class="brush:php;toolbar:false;"></pre>、white-space、或   这四类手段，选哪个取决于你到底要“保留什么”和“用在哪儿”。

用 `<pre class="brush:php;toolbar:false;"></pre>` 标签原样输出所有空白

这是最粗暴也最可靠的方案，适合代码块、日志、ASCII 图、对齐要求严格的文本。它会照搬源码里的空格、缩进、换行，连制表符都原样渲染。

<pre class="brush:php;toolbar:false;"></pre> 默认用等宽字体，如果不想用等宽，加 font-family: sans-serif; 覆盖
它自带上下外边距（margin），嵌在段落里时容易撑开布局，建议加 margin: 0;
不推荐用于大段正文排版，语义上它表示“预格式化文本”，跟普通段落混用会降低可访问性

<pre class="brush:php;toolbar:false;" style="margin:0; font-family:sans-serif;">
  第一行开头有两个空格
    第二行有四个空格
第三行无缩进

用 `white-space` CSS 属性精细控制

比 <pre class="brush:php;toolbar:false;"></pre> 更灵活，能嵌入任意标签（如 、<div>），且不影响语义。关键看你要保留什么： <ul> <li> <code>white-space: pre;：完全保留空格+换行，但不自动换行（超长内容会溢出容器）

white-space: pre-wrap;：保留所有空格和换行，同时允许在单词边界处正常折行（最常用）

white-space: pre-line;：合并连续空格，只保留换行符（适合纯换行需求，比如诗歌）

别用 white-space: normal; 或不设——那就回到默认压缩行为

注意：该属性作用于**容器元素本身**，不是子元素；且对内联元素（如 ）效果受限，优先套在块级容器上。