如何在不使用<br>标签的情况下让<span>内的每个单词后换行

嘿，我来帮你搞定这个需求！不用<br>标签，也不用修改原HTML结构，我们可以用CSS或者JavaScript轻松实现每个单词单独换行的效果：

方法1：纯CSS快速实现（适合简单场景） #

这个方法靠设置超大的单词间距，强制每个单词换行到下一行，同时保证单词完整不被截断：

span {
  word-spacing: 100vw; /* 用视口宽度作为间距，确保第二个单词挤到下一行 */
  white-space: nowrap; /* 禁止单词内部换行 */
  line-height: 1.5; /* 调整行高让排版更舒服 */
}

如果觉得单词之间的间距太大，还可以加个小优化，让元素宽度贴合单词本身：

span {
  word-spacing: 100vw;
  white-space: nowrap;
  line-height: 1.5;
  display: inline-block;
  width: fit-content; /* 宽度自适应单词长度 */
  text-align: left;
}

注意：这个方案在旧版浏览器里可能有些兼容性问题，但现代浏览器都能很好支持。

方法2：JavaScript方案（更灵活可靠） #

如果想要完美的排版——每个单词独占一行且间距正常，用JS动态处理是最优解。我们可以把span里的文本按空格分割成单词，再把每个单词包裹成块级元素：

// 找到目标span元素
const targetSpan = document.querySelector('span');
// 把文本分割成单词数组（处理多个空格的情况）
const words = targetSpan.textContent.trim().split(/\s+/);
// 重新构建内容，每个单词用块级span包裹
targetSpan.innerHTML = words.map(word => `<span style="display: block;">${word}</span>`).join('');

这样处理后，不管单词长短，每个都会单独占一行，排版干净整洁。如果有多个需要处理的span，只需要稍微修改代码：

// 给需要处理的span加个类，比如"word-break-per-word"
document.querySelectorAll('span.word-break-per-word').forEach(span => {
  const words = span.textContent.trim().split(/\s+/);
  span.innerHTML = words.map(word => `<span style="display: block;">${word}</span>`).join('');
});

记得给目标span加上对应的类名就行啦～

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