如何实现仅在span标签闭合后换行的布局效果？

你遇到的问题是因为<span>默认是inline元素，浏览器会根据容器宽度在单词间隙自动换行，导致单个<span>被拆分成多行。用纯CSS就能解决，核心是让每个<span>成为不可拆分的独立单元：

修改后的CSS代码 #

p {
  max-width: 30ch;
}

p em {
  vertical-align: middle; /* 让文本和标签垂直居中对齐 */
}

p span {
  display: inline-block; /* 关键：将span转为内联块，确保整体不被拆分 */
  border: 1px solid black;
  padding: 0.25rem 0.5rem; /* 简化内边距写法 */
  font-size: 0.875rem;
  line-height: 1.25rem;
  margin: 0 0.5rem 0.25rem 0; /* 调整间距，避免标签重叠 */
  border-radius: 999px;
}

对应的HTML（可保持原结构，建议整理多余空格） #

<p>
  <em>Frameworks used:</em>
  <span>hello world</span>
  <span>hello world</span>
  <span>hello world</span>
  <span>hello world</span>
  <span>hello world</span>
  <span>hello world</span>
  <span>hello world</span>
  <span>hello world</span>
  <span>hello world</span>
  <span>hello world</span>
  <span>hello world</span>
  <span>hello world</span>
</p>

效果说明 #

• display: inline-block让每个<span>作为独立的内联容器，浏览器只会在整个<span>结束后换行，不会拆分单个标签内容。
• 新增的vertical-align: middle保证<em>文本和标签垂直对齐，视觉更协调。
• 调整margin增加标签间的上下间距，避免换行后标签重叠。

如果需要兼容极旧浏览器，也可以用white-space: nowrap给<span>强制内部不换行，但这种方式可能导致超长<span>溢出容器，不如inline-block稳妥。

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