段落内包含多个span元素时，text-align: justify无法实现文本两端对齐

你遇到的问题核心在于：text-align: justify 的生效逻辑依赖文本的换行行为，且默认只会调整有空白分隔的文本块之间的间距。当<p>内的<span>元素之间没有空白字符时，浏览器会将它们解析为连续的文本流，单行状态下justify不会触发间距调整；同时纯行内元素的排版特性也限制了justify的作用范围。

下面是几个实用的解决办法：

方法1：添加空白字符 + 强制最后一行对齐 #

直接在HTML的span之间插入空格，让浏览器识别为独立的文本块，再用text-align-last确保单行也能两端对齐：

HTML代码：

<p><span>Hello</span> <span>I</span> <span>am</span> <span>a</span> <span>frontend</span> <span>dev</span></p>

CSS代码：

p {
  text-align: justify;
  text-align-last: justify; /* 兼容Chrome、Firefox、Edge等现代浏览器 */
}

方法2：用伪元素强制触发justify（无需修改HTML） #

如果不想改动HTML结构，可以给<p>添加一个占满整行的伪元素，让原有文本被识别为“非最后一行”，从而触发justify的间距调整：

CSS代码：

p {
  text-align: justify;
}
p::after {
  content: "";
  display: inline-block;
  width: 100%;
}

这个方法适合单行文本的两端对齐需求，不会破坏原有HTML结构。

方法3：Flex布局实现更灵活的对齐 #

将<p>设置为flex容器，利用justify-content: space-between直接分散对齐span元素，这种方式不受文本换行和空白字符的限制：

CSS代码：

p {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap; /* 可选：内容过长时自动换行 */
}
p span {
  display: inline-block;
}

该方法适合需要动态调整布局的场景，尤其是内容可能换行的情况。

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