如何让HTML中的span标签实现与标点符号一致的自动换行规则

你的代码存在两处基础语法错误，同时布局逻辑没有阻止前缀文本和后缀块之间的换行：

1. white-space的合法属性值是nowrap，你写的no-wrap是无效值
2. 所有.punctuation的结束标签误写为<span>，导致标签嵌套异常
3. inline-block元素和前方文本之间默认会被识别为合法换行点，所以会出现后缀块和前缀文本拆分到两行的问题

解决方案 #

把每个「前缀文本 + 后缀X Y,」作为一个整体单元，给单元设置white-space: nowrap即可实现你要的换行效果，浏览器会把整个单元当成不可拆分的独立单位计算换行，和,"的标点换行行为完全一致。

可运行的正确代码示例：

<style>
.text-unit {
  white-space: nowrap;
}
</style>

<span style="width: 100px; display: block;">
"a," "ab," "abc," "abcd," "abcde," "abcdef,"
<br>
<span class="text-unit">aX Y,</span>
<span class="text-unit">abX Y,</span>
<span class="text-unit">abcX Y,</span>
<span class="text-unit">abcdX Y,</span>
<span class="text-unit">abcdeX Y,</span>
</span>

如果你需要保留独立的.punctuation标签单独控制后缀样式，可以用嵌套写法：

<style>
.text-unit {
  white-space: nowrap;
}
.punctuation {
  /* 可单独添加后缀的自定义样式，比如颜色、字号 */
  color: #f00;
}
</style>

<span style="width: 100px; display: block;">
"a," "ab," "abc," "abcd," "abcde," "abcdef,"
<br>
<span class="text-unit">a<span class="punctuation">X Y,</span></span>
<span class="text-unit">ab<span class="punctuation">X Y,</span></span>
<span class="text-unit">abc<span class="punctuation">X Y,</span></span>
<span class="text-unit">abcd<span class="punctuation">X Y,</span></span>
<span class="text-unit">abcde<span class="punctuation">X Y,</span></span>
</span>

内容的提问来源于stack exchange，提问作者Gavin Haynes