单行文本怎么实现两端对齐

pax大约 2 分钟

单行文本两端对齐的实现方法

单行文本两端对齐（Justify）是指让文本在容器的左右边界之间均匀分布，使文本的左右两端都与容器边缘对齐。以下是几种常用的实现方式：

方法一：使用 `text-align: justify`（最常用）

.justify-text {
  text-align: justify;
  text-align-last: justify; /* 确保最后一行也两端对齐 */
}

<div class="justify-text">
  这是一段需要两端对齐的文本
</div>

text-align: justify：使文本两端对齐
text-align-last: justify：确保最后一行也两端对齐（对于单行文本尤其重要）

方法二：使用伪元素辅助实现

.justify-text {
  text-align: justify;
}

.justify-text::after {
  content: '';
  display: inline-block;
  width: 100%;
}

<div class="justify-text">
  这是一段需要两端对齐的文本
</div>

原理：通过添加一个伪元素占满一行，使得原文字"被迫"两端对齐
兼容性好，适用于不支持 text-align-last 的浏览器

方法三：使用 Flexbox 布局

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

<div class="justify-text">
  <span>这是一段</span>
  <span>需要两端对齐的</span>
  <span>文本</span>
</div>

原理：将文本拆分为多个部分，使用 Flexbox 的 justify-content: space-between 实现分布
适用于已知文本结构的情况

方法四：使用 CSS Grid 布局

.justify-text {
  display: grid;
  grid-template-columns: auto auto auto;
  justify-content: space-between;
}

<div class="justify-text">
  <span>这是一段</span>
  <span>需要两端对齐的</span>
  <span>文本</span>
</div>

原理：类似 Flexbox，但使用 Grid 布局实现
适用于结构化文本

方法五：使用 JavaScript 动态计算（适用于复杂场景）

<div id="justify-text">这是一段需要两端对齐的文本</div>

.char {
  display: inline-block;
}

const textElement = document.getElementById('justify-text');
const text = textElement.innerText;
textElement.innerHTML = '';

const chars = text.split('');
const containerWidth = textElement.offsetWidth;
const charCount = chars.length;
const gap = (containerWidth - (charCount * 12)) / (charCount - 1); // 假设每个字符宽度为12px

chars.forEach((char, index) => {
  const span = document.createElement('span');
  span.className = 'char';
  span.textContent = char;
  if (index < chars.length - 1) {
    span.style.marginRight = `${gap}px`;
  }
  textElement.appendChild(span);
});

原理：通过 JS 计算每个字符间距，实现精确对齐
适用于需要精确控制的场景

各方法对比

方法	优点	缺点	适用场景
`text-align: justify`	简单易用，纯 CSS	需要 `text-align-last` 支持	大部分现代浏览器
伪元素辅助	兼容性好	需要额外元素	需要兼容老浏览器
Flexbox	灵活控制	需要拆分文本	已知文本结构
Grid	布局强大	需要拆分文本	复杂布局需求
JavaScript	精确控制	性能开销大	特殊定制需求