翻看之前写的技术文章发现内容只要包含中文+英文+符号在一行下部分会显示异常，部分又是正常的如下图，把渲染显示异常的内容复制其他地方粘贴又显示正常，检查了源代码和文章内容发现又是正常的，百思不得其解

经过查找相关资料最终定位到是因为HTML代码中有定义了CSS样式为text-align: justify;（两端对齐）导致的异常

为啥会出现这个问题？

text-align: justify;（两端对齐）在中文与英文/符号混排的段落中，浏览器渲染的时中文字符间出现视觉空隙

text-align: justify工作原理

拉伸行内空白（包括空格、换行符、以及浏览器自动插入的“中英文间距”）使每行左右边缘对齐

在中英文混排时：

浏览器会在中文与 \、_、. 等符号间自动插入“软空隙”

justify 会放大这些软空隙，导致“计 算 机”现象更严重

而这些空隙不是真实空格，所以复制出来仍是“计算机”

为什么技术文档中使用CSS样式text-align: justify是个错误的选择？

因为当代码为

<p>
计算机\HKEY_LOCAL_MACHINE\SOFTWARE
</p>

渲染结果可能变成

计    算     机\HKEY_LOCAL_MACHINE\SOFTWARE

浏览器在“机”和\之间加了视觉间隙justify 把这个间隙当作“可拉伸空白”进一步放大

解决方法

技术文档、路径、说明文字推荐使用左对齐

text-align: left;或者text-align: start;

因为值justify 更适合纯中文长文章（如新闻、介绍等），不适合含代码、路径、有符号的文字段落

总结

如果页面内容含路径/代码/命令的文字段落禁用 text-align: justify，改用text-align: left，技术文档优先可读性，而非整齐，页面内容是纯中文长文章则可以用text-align: justify