理解基础属性：text-align: justify

在网页排版中，实现文本的两端对齐是一种提升视觉规整度的常用手法。CSS中最为直接的属性便是`text-align: justify`。该属性作用于块级容器内的行内内容，其效果是调整文字与单词间的间距，使得除最后一行外的每一行文本都均匀填充容器的宽度，左右边缘整齐对齐。这与我们日常在书籍、报刊中看到的段落排版效果类似。然而，在实际使用中，开发者会发现一个明显的局限：默认情况下，`text-align: justify`对段落的最后一行无效，它依然会保持左对齐（或根据`direction`属性设定的对齐方式）。这使得在多行文本但行数较少，或容器宽度变化时，难以达到完美的两端对齐效果。

进阶控制：text-align-last属性

为了解决最后一行对齐的问题，CSS3引入了`text-align-last`属性。这个属性专门用于设置块级元素中最后一行文本的对齐方式。当将其值设置为`justify`时，即可强制最后一行也参与两端对齐布局。例如，`p { text-align: justify; text-align-last: justify; }`就能实现包含最后一行在内的完全两端对齐。不过，需要注意的是`text-align-last`的浏览器兼容性虽然在现代浏览器中已普遍良好，但在一些旧版本或特定场景下仍需考虑回退方案。因此，在追求广泛兼容性的项目中，我们往往需要借助其他技巧。

经典兼容方案：伪元素技巧

在`text-align-last`支持度不够理想时，一个广泛使用的经典技巧是利用`::after`伪元素。其原理是为文本容器添加一个看不见的、宽度为100%的伪元素，并使其成为行内块元素。由于`text-align: justify`会对行内块元素也产生作用，这个占满一整行的伪元素会“欺骗”浏览器，让原本的最后一行变成“非最后一行”，从而被`justify`属性影响，实现对齐。具体代码通常如下：为容器设置`text-align: justify;`，然后添加`.container::after { content: ''; display: inline-block; width: 100%; }`。此方法兼容性极佳，是许多CSS重置样式库中的标准做法，用于处理列表、导航等短文本项目的两端对齐。

实战应用：响应式卡片布局

理论需要结合实践。假设我们正在构建一个产品展示页面，其中包含一系列宽度可变的卡片，每张卡片底部有一组描述性标签。我们希望这些标签无论数量多少，都能在卡片宽度变化时均匀分布，并贴紧左右边缘，形成整洁的视觉效果。这正是两端对齐大显身手的场景。我们可以将标签容器设置为`text-align: justify;`，并应用上述的伪元素技巧。同时，每个标签本身需要设置为`display: inline-block;`，以确保它们被当作独立的行内块对象处理。通过合理的内边距（padding）和边框（border）设置，可以美化标签外观。在媒体查询中调整卡片宽度时，标签会自动重新分布对齐，无需为不同断点编写复杂的布局代码，极大地增强了布局的灵活性与可维护性。

注意事项与最佳实践

在项目中使用两端对齐时，有几点需要留意。首先，对于纯英文文本，单词间空格会被拉伸以实现对齐，这可能在某些情况下导致间距过大，影响可读性。此时可以配合`word-spacing`或`letter-spacing`属性进行微调。其次，对于中文文本，由于字符等宽，两端对齐效果通常更佳，但需注意标点符号的避头尾规则，避免行首出现句号、逗号等。最后，两端对齐是一种排版增强手段，不应过度使用。在长段落文章中，适当的左右留白和自然的词间距对于阅读体验至关重要。因此，建议将其用于导航、标签组、摘要信息等短文本内容的布局美化，而非大段正文。合理运用，方能提升界面设计的精致度与专业性。

《夸克》非常好用的免费AI浏览器

下载APP查看