谈谈文字两端对齐的css问题

这是我参与8月更文挑战的第19天，活动详情查看：8月更文挑战

前言

文字两端对齐问题还挺常见的，比如说容器内有一段文字，如果不是两端对齐的话，看起来就不是很整齐。还有在一些提交表单界面，表单的标题一般也是两端展示的，比如在做表单的时候，我们一般会设置为文字两端对齐的样式，两个字，三个字，四个字都有可能，比如姓名，省市区，详细地址等。

那么文字的两端对齐有什么方法，这些方法又有什么样的局限和兼容性呢？

今天，我们就来谈一谈文字两端对齐的问题。

justify对齐

文字两端对齐最常用的css样式莫过于text-align:justify;了，并且这个样式的兼容性目前来说也还不错，我们把代码和效果贴一下：

<style>
    div{
        margin: 100px auto;
        border: 1px solid #333;
        width: 200px;
        height: 300px;
    }

    p{
        width: 100px;
        background-color: rgb(242, 255, 185);
        text-align: justify;
    }
</style>

<div>
    <p>姓名</p>
    <p>省市区</p>
    <p>详细地址</p>
    <p>name</p>
    <p>you tel</p>
</div>

看起来text-align:justify;好像没有生效，这是因为这个属性所表示的两端对齐是不包括最后一行的，所以当只有一行的时候，看起来好像没有效果。

添加空元素

那既然知道了原因，我们就能想到对应的方法，没错，就是给p标签的内容后面再加一个元素。比如：

<style>
    div{
        margin: 100px auto;
        border: 1px solid #333;
        width: 200px;
        height: 300px;
    }

    p{
        width: 100px;
        background-color: rgb(242, 255, 185);
        text-align: justify;
    }
    i{
        display: inline-block;
        width: 100%;
        或
        padding-left: 100%;
        或 
        margin-left: 100%;
    }
</style>

<div>
    <p>姓名<i></i></p>
    <p>省市区<i></i></p>
    <p>详细地址<i></i></p>
    <p>name<i></i></p>
    <p>you tel<i></i></p>
</div>

可以看到，虽然文字两端对齐了，但是整体盒子却变高了，我们明明没有给i标签设置高度啊，为什么会这样呢？这是因为内容区域现在是两行，每行的行高是默认的文字的行高，虽然i标签没有高度，但是两行的内容，每一行都有一定的行高，两行行高就把盒子高度撑起来了。

所以，我们要给p标签直接设置高度即可。

伪元素大法

当然啦，你可能觉得在内容里面手动添加空标签实在是太麻烦，又不优雅，作为一名优雅的前端工程师，我们自然希望有更好的表现方法。

当当当当，这时候就要伪元素来救场了。

<style>
    div{
        margin: 100px auto;
        border: 1px solid #333;
        width: 200px;
        height: 300px;
    }

    p{
        width: 100px;
        height: 20px;
        line-height: 20px;
        background-color: rgb(242, 255, 185);
        text-align: justify;
    }

    p::after{
        content: '';
        display: inline-block;
        padding-left: 100%;
        margin-left: 100%;
    }
</style>

<div>
    <p>姓名</p>
    <p>省市区</p>
    <p>详细地址</p>
    <p>name</p>
    <p>you tel</p>
</div>

其实还有更简单的，那就是text-align-last: justify;，不过这个也是有一定的兼容性问题。

<style>
    div{
        margin: 100px auto;
        border: 1px solid #333;
        width: 200px;
        height: 300px;
    }

    p{
        width: 100px;
        height: 20px;
        line-height: 20px;
        background-color: rgb(242, 255, 185);
        text-align: justify;
        text-align-last: justify;
    }
</style>

<div>
    <p>姓名</p>
    <p>省市区</p>
    <p>详细地址</p>
    <p>name</p>
    <p>you tel</p>
</div>

如图所示：

兼容性方案

说到兼容性，我们还要考虑一个样式，那就是text-justify，我们来看下text-justify的属性值：

auto :允许浏览器用户代理确定使用的两端对齐法则

inter-word :通过增加字之间的空格对齐文本。该行为是对齐所有文本行最快的方法。它的两端对齐行为对段落的最后一行无效

newspaper : 通过增加或减少字或字母之间的空格对齐文本。是用于拉丁文字母表两端对齐的最精确格式

distribute :处理空格很像newspaper

distribute-all-lines:两端对齐行的方式与distribute相同，也同样不包含两段对齐段落的最后一行。适用于表意字文档

inter-ideograph : 为表意字文本提供完全两端对齐。他增加或减少表意字和词间的空格

一般我们通过改变字与字之间的间距使得每行对齐，即：

div{
    text-align:justify;
    text-justify:inter-word;
}

那么如何把兼容做好呢？英文中间有空格，所以会这个空格会被放大以达到两端对齐的效果，但是中文每个字符之间并没有空格，以至于有的浏览器看起来像是没生效，所以字符之间是要加空格的，

下面我们来看一下各大主流即非主流浏览器的兼容方法：

<style>
    div{
        margin: 100px auto;
        border: 1px solid #333;
        width: 200px;
        height: 300px;
    }

    p{
        width: 100px;
        height: 20px;
        line-height: 20px;
        background-color: rgb(242, 255, 185);
        text-align: justify;
        text-align-last: justify;
    }
    p:after{
    content: '';
    display: inline-block;
    width: 100%;
}
</style>

<div>
    <p>姓 名</p>
    <p>省 市 区</p>
    <p>详 细 地 址</p>
    <p>name</p>
    <p>you tel</p>
</div>

好了，完美撒花！！！

后记

你好哇，我是南极大冰块，一个技术与颜值成正比的前端工程师，崇尚一针见血的搞定前端问题，希望我的博客有帮助到了你。

关注我，前端路途一起走。嘿哈~😛