如何让浏览器在无空格的行内元素之间自动换行？

不需要手动插入空格文本节点，用CSS就能搞定，推荐两种实用方法：

方法1：伪元素模拟空格 #

给父容器和内部span添加以下样式：

.block-container {
  word-spacing: normal;
}
.block-container span::after {
  content: " ";
}

通过::after伪元素给每个span后面自动添加空格，还原手动加空格的换行逻辑，父容器的word-spacing确保空格间距和自然单词一致。

方法2：改用inline-block元素 #

把span的display属性调整为inline-block，再加个右边距模拟单词间距：

.block-container span {
  display: inline-block;
  margin-right: 0.25em; /* 可根据视觉需求调整间距 */
}

inline-block元素本身就会在容器边缘自动换行，右边距替代空格实现单词间的间隔，兼容性拉满，不用考虑伪元素的兼容问题。

优化细节 #

如果不想最后一个span后面留多余空格，用:last-child伪类清除即可：

/* 对应方法1的写法 */
.block-container span:last-child::after {
  content: "";
}
/* 对应方法2的写法 */
.block-container span:last-child {
  margin-right: 0;
}

内容的提问来源于stack exchange，提问作者Jack M