能否通过设置letter-spacing实现三行文本自动两端对齐？求纯CSS方案

首先直接给结论：仅靠letter-spacing单独设置无法自动让所有行实现两端对齐，但纯CSS有办法实现大部分场景的需求，无需JavaScript

原代码的问题 #

你当前的text-align: justify + text-align-last: justify组合，无法让所有行都生效的原因是：

• text-align: justify默认只对包含多行的文本容器生效，且只会拉伸行内的单词间距（而非字母间距）；
• 你的结构里每一行通过<br>分隔，相当于每一行都是容器的“最后一行”，text-align-last: justify虽然能控制最后一行，但对于单个单词的行（比如DOLOR），没有间距可以拉伸，所以依然无法实现两端对齐。

解决方案1：多单词行自动两端对齐（无需改HTML） #

这个方案能让包含多个单词的行自动两端对齐，调整的是单词间距，效果符合预期：

.logo {
  position: absolute;
  text-align: justify;
  width: 200px; /* 必须给容器一个明确宽度，否则无法计算对齐范围 */
}

.logo::after {
  content: "";
  display: inline-block;
  width: 100%;
  visibility: hidden;
  height: 0;
}

原理是通过:after伪元素添加一个占满容器宽度的空行，让浏览器认为容器内有多行文本，从而触发text-align: justify对所有真实行生效，实现两端对齐。

解决方案2：单个单词行的字母间距自动拉伸（兼容性有限） #

如果需要让单个单词（比如DOLOR）的字母间距自动拉开，填满容器宽度，纯CSS可以用text-align: justify-all，但这个属性目前仅Firefox支持：

.logo {
  position: absolute;
  text-align: justify-all;
  width: 200px;
}

解决方案3：兼容所有浏览器的单行单词两端对齐（需小改HTML） #

如果要兼顾所有浏览器，同时让单个单词的字母自动拉开对齐，可以把单行单词拆成单个字母，用Flex布局实现：

修改后的HTML：

<div class='logo'>
  LOREM IPSUM<br>
  <span class="single-word">D<span>O<span>L<span>O<span>R</span><br>
  SIT AMET
</div>

对应的CSS：

.logo {
  position: absolute;
  text-align: justify;
  width: 200px;
}

.logo::after {
  content: "";
  display: inline-block;
  width: 100%;
  visibility: hidden;
  height: 0;
}

.single-word {
  display: flex;
  justify-content: space-between;
}

这个方法通过Flex的space-between让单个字母均匀分布，实现两端对齐，同时保留多单词行的自动对齐效果。

关于letter-spacing的补充 #

如果你想手动调整字母间距来辅助对齐，可以在.logo类里添加letter-spacing: Xpx，但这是固定值，无法根据容器宽度自动调整，所以只能作为辅助优化，不能实现自动对齐的核心需求。

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