是HTML中表示不换行空格的实体,强制保留不可折行的空白字符,用于解决表格空值、按钮右隙、英文缩写防断行等特定排版需求,而非美化代码或替代CSS布局。
是 HTML 中表示“不换行空格”的实体,它和普通空格在渲染行为上完全不同——普通空格会被浏览器合并、折叠、忽略首尾,而 会强制保留一个不可折行的空白字符。
HTML 解析器默认遵循“空白字符合并规则”:连续的空格、制表符、换行符会被压缩成单个空格;段落开头/结尾的空格被直接丢弃;行末空格不触发换行。这意味着写 hello world hello world 和 渲染效果完全一样。
替代(比如 hello world
)white-space 属性也能改变该行为,但开销更大、兼容性更复杂 的真实使用场景有哪些它不是用来“多打几个空格美化代码”的,而是解决特定排版需求的最小化手段:
,否则边框
塌陷或高度异常)padding(如 ) 或 内容被压缩(虽然更推荐用 CSS 控制)Mr. Smith) 更可控的情况当需要对齐、间距或响应式行为时, 很快会失控:
拼,用 display: flex 或 text-align + widthmargin 或 gap,而非 icon textwhite-space: pre 或 white-space: pre-wrap 配合普通空格 在屏幕阅读器中仍被读作“空格”,大量堆砌会影响无障碍体验正确:地址:北京市 朝阳区 建国路1号
错误:地址:北京市 朝阳区 建国路1号
真正难的是判断什么时候该用 ,什么时候该交给 CSS —— 它只适合“一个不可折行的空白”这个原子需求,一旦涉及尺寸、响应、语义或维护性,就该收手了。