HTML怎么设置word-spacing_HTML word-spacing单词间距设置【新手必读】-html教程-PHP中文网

word-spacing 对中文无效，因中文无空白符分隔的“词”；调汉字间距应使用 letter-spacing。它仅在空格处生效，如“登录”，而“欢迎来到首页”被视为一词；混用二者易导致间距失控，且 css 无原生中文词间距支持。

html怎么设置word-spacing_html word-spacing单词间距设置【新手必读】

word-spacing 只对“以空白符分隔的单词”起作用，中文段落基本无效；想调汉字间距，请用 letter-spacing。

浏览器把“词”定义为被空白符（空格、制表符、换行）包围的字符串。中文文本里没有空格，word-spacing 就找不到可操作的“词”。比如：

p { word-spacing: 10px; }
<p>欢迎来到首页</p>

这段 HTML 渲染时，整个“欢迎来到首页”被当作一个词，word-spacing 不会插入任何额外间隙。

只有出现空格或制表符的位置才可能生效，例如 <p>登录</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill5117" title="HTML Extract"><img src="https://img.php.cn/upload/skill/000/000/081/179033952939354.jpg" alt="HTML Extract" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill5117" title="HTML Extract" class="overflowclass">HTML Extract</a> <p class="overflowclass">使用 MinerU 从 HTML 页面和文件中提取内容，将 HTML 转换为保持标题、列表、表格及文本层次结构的干净、结构化 Markdown。F...</p> </div> <a rel="nofollow" href="/xiazai/skill5117" title="HTML Extract" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> 中的“登”和“录”之间有空格，word-spacing 才会撑开它
中英文混排时，英文单词会被单独识别，word-spacing: 5px 可能让“Contact us”变成“Contact us”，但“联系我们”不变
使用 white-space: pre 或强行插入空格，也不改变 word-spacing 的识别逻辑——它只认原始空白符，不认实体字符

word-spacing 接受 normal、带单位的长度值（如 2px、-0.1em）、initial、inherit。其中 normal 等价于 0，不是“浏览器自定值”。

word-spacing: 0 和 word-spacing: normal 行为一致，都取消额外词间距
负值允许，但 word-spacing: -5px 可能导致英文单词粘连，尤其在小字号下（如 font-size: 12px）
慎用 em 单位：它基于当前元素的 font-size 计算，父容器字体变化时，词间距会意外缩放
word-spacing 在 display: inline-flex 或 display: grid 容器中可能被对齐方式覆盖，优先级低于 justify-content 或 gap

两者叠加生效，但作用对象完全不同：letter-spacing 拉开每个字符，word-spacing 只在词边界加空隙。混用容易失控：

button {
  letter-spacing: 1px;
  word-spacing: 4px;
}
<button>立即购买</button>

上面代码对纯中文按钮无效（无词边界），但若写成 <button>立即购买</button>（中间有空格），结果是：“立”“即”各距 1px，“立即”与“购买”之间额外 +4px —— 实际视觉间距变成 1px + 4px + 1px = 6px，远超预期。

调试时可用浏览器开发者工具的“Computed”面板，逐层查看 letter-spacing 和 word-spacing 的最终计算值
避免在 body 或通用类（如 .text）上同时设置二者，尤其当内容含数字、英文、图标字体时，易引发错位（如 Font Awesome 的 <i class="fa"></i> 会被 letter-spacing 拉变形）
移动端 Safari 对负 letter-spacing + 小字号组合渲染不稳定，而 word-spacing 影响较小——但前提是你的文本真有空格