前言
文字两端对齐问题还挺常见的，比如说容器内有一段文字，如果不是两端对齐的话，看起来就不是很整齐。还有在一些提交表单界面，表单的标题一般也是两端展示的，比如在做表单的时候，我们一般会设置为文字两端对齐的样式，两个字，三个字，四个字都有可能，比如姓名，省市区， 详细地址等。
那么文字的两端对齐有什么方法，这些方法又有什么样的局限和兼容性呢？
今天，我们就来谈一谈文字两端对齐的问题。
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>
复制代码
好了，完美撒花！！！
后记
你好哇，我是南极大冰块，一个技术与颜值成正比的前端工程师，崇尚一针见血的搞定前端问题，希望我的博客有帮助到了你。
关注我，前端路途一起走。嘿哈~😛
评论