如何使包含<span>标签的文本保持一致的两端对齐效果

以下是几个轻量的CSS修改方案，按优先级排序：

1. 消除带来的额外空白 #

当在white-space: pre-wrap的容器中插入时，HTML中与前后文本的空格/换行会被保留，导致排版错位。可以通过以下CSS强制消除这类空白影响：

/* 容器样式 */
.text-container {
  white-space: pre-wrap;
  text-align: justify;
  /* 关键：让容器内的空白字符不占据宽度 */
  font-size: 0;
}

/* 重置文本和<span>的字体大小 */
.text-container > *,
.text-container {
  font-size: 16px; /* 替换为你实际使用的字体大小 */
}

这个方法既保留了pre-wrap对制表符、换行的解析，又避免了前后空白导致的错位。

2. 强制与文本基线对齐 #

如果错位是因为的垂直对齐方式异常，添加以下CSS确保它和普通文本对齐：

.text-container span {
  vertical-align: baseline;
  /* 移除可能影响的内边距、外边距 */
  margin: 0;
  padding: 0;
  border: none;
}

3. 优化两端对齐的计算逻辑 #

针对不同语言的文本，调整text-justify属性让对齐更精准：

.text-container {
  text-align: justify;
  /* 英文用单词间间距对齐 */
  text-justify: inter-word;
  /* 中文用字符间间距对齐，可根据需求切换 */
  /* text-justify: inter-character; */
}

额外注意 #

动态插入时，确保插入的HTML结构中与前后文本没有额外的空格或换行，比如：

<!-- 正确写法 -->
<div class="text-container">这是一段需要<span>高亮</span>的文本</div>

<!-- 错误写法（会引入空格） -->
<div class="text-container">
  这是一段需要
  <span>高亮</span>
  的文本
</div>

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