css设置文本和内容两端对齐

更新时间：2024-12-23 09:08:05

在项目中，UI设计师常需应用简洁、高级的排版样式，比如让表单字段内容在宽度不固定时保持两端对齐，如姓名、手机号、出生地等。为实现这一效果，CSS提供了text-align属性，尤其是justify，可自动调整多行文本两端对齐。

然而，使用justify应注意以下两点：它不适用于单行文本或强制换行文本，且最后一行无法实现两端对齐。因此，面对表单内容必须两端对齐的挑战，有几种解决方案。

首先，通过在文本前加入占位符元素，确保总有多于一行的文本。随后应用text-align: justify，即可达到期望效果。

其次，应用伪元素（不支持IE7及以下版本）实现类似功能，借助`:after`插入内容帮助对齐。

方法三是利用text-align-last: justify，简化两端对齐操作。但此方法在跨浏览器兼容性上存在限制，特别注意谷歌和火狐可以正确显示效果，其他浏览器可能不支持。

最后，为适应更多浏览器环境，需确保每个单词间保留一空格，而非多个。这样，在不使用辅助元素的情况下，可实现兼容性极高的两端对齐效果。此方法兼容性极强，尤其适用于IE7及以上版本，其他主流浏览器也基本支持。