文本对齐方式对比器 - 两端对齐/左齐/右齐效果

左对齐是最常用的对齐方式，文本左边缘整齐，右边缘因每行字数不同而自然参差，阅读体验流畅，适合绝大多数场景。

两端对齐则强制文本左右两端都对齐（通过调整单词间距或字符间距实现），整体看起来更规整、更有"块状"感，常用于报纸、杂志、书籍正文等正式排版场景。但两端对齐可能导致英文单词间距过大（出现"河流"效果），中文则相对自然。

注意：两端对齐的最后一行默认是左对齐的，如需改变可使用 text-align-last 属性。

text-align-last 用于控制段落最后一行的对齐方式。它接受与 text-align 相同的值：left、right、center、justify 等。

例如，当使用 text-align: justify 时，最后一行默认左对齐。如果你希望最后一行也两端对齐（强制拉伸），可以设置：

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

这在设计对称排版或特殊视觉效果时非常有用，但需谨慎使用，因为强制拉伸最后一行可能影响可读性。

中英文混排时两端对齐的核心挑战在于：中文通过调整字符间距实现两端对齐（效果自然），而英文通过调整单词间距实现（可能导致间距过大）。

优化建议：

• 使用 hyphens: auto 开启英文自动连字符，减少过大间距
• 使用 word-break: break-all 允许单词内断行（谨慎使用）
• 使用 CSS text-justify: inter-character（实验性属性）让英文也通过字符间距调整
• 在设计时预留足够的容器宽度，避免窄容器中英文单词间距过大

响应式设计中文本对齐的选择建议：

• 移动端（窄屏）：优先使用左对齐，因为在窄容器中两端对齐可能导致英文单词间距过大
• 平板/桌面（宽屏）：正文可考虑两端对齐，提升排版质感
• 使用媒体查询：根据屏幕宽度动态切换对齐方式

  @media (max-width: 640px) {
    .content { text-align: left; }
  }
  @media (min-width: 641px) {
    .content { text-align: justify; }
  }

• 标题和短文本：居中对齐在移动端和桌面端都表现良好

右对齐虽然不如左对齐常用，但在以下场景中非常合适：

• 数字列：财务报表、价格列表中的数字通常右对齐，便于对比大小
• 日期和署名：信件、文章的日期和署名常右对齐
• 侧边栏：页面右侧的辅助信息可右对齐以增强视觉层次
• RTL语言：阿拉伯语、希伯来语等从右向左书写的语言默认右对齐
• 引用块：某些设计风格的引用文字使用右对齐创造独特视觉效果

text-align 控制水平方向的对齐（左、中、右、两端），作用于块级元素内的行内内容。

vertical-align 控制垂直方向的对齐（顶部、中部、底部、基线等），仅作用于行内元素或表格单元格，不能直接用于块级元素的垂直居中。

如需实现块级元素的垂直居中，通常使用 display: flex; align-items: center 或 line-height 等方案。