事情的起因是这样的，在Review一位同事做的页面时，创造好几处字符之间写了很多空格，于是问他为什么这么做，他说设计哀求这几个文本的呈现宽度必须同等，但它们的字符个数又不同，以是就在字符数少的文本中添加空格从而达到文本两端对齐（字符均匀分布）的效果，于是我对他表示了侮辱性的赞颂。
用添加空格符的办法实现文本两端对齐，除了不足优雅，随意马虎被羞辱之外，还有其他三个问题：
1. 不同的浏览器，不同的移动设备，对空格符的展示宽度是有细微差别的，一个空格看不出影响，但是多个空格就无法担保同等了，很有可能涌现没对齐或者折行的情形。
2. 任何页面都避免不了修正，如果文本须要改换，并且改换后字数发生变革，这将意味着之前的空格数量须要重新调度，非常不利于掩护。
3. 某些页面上的文本，用户可能会去复制，但复制下来后创造含有很多空格符，仍须要二次编辑。
因此在日常开拓中要避免利用空格符来实现两端对齐，而该当利用标准的CSS文本对齐属性来办理。
CSS文本对齐属性 text-align
这个属性大家常常用到的值有三个：
left：左对齐
right：右对齐
center：居中对齐
它还有一个属性值：justify，表示文本两端对齐，也便是让文本在固定宽度内均匀分布，使两边不会涌现空缺。那么用这个属性是否就能很好的实现文本两端对齐呢？
通过测试创造，单行文本通过text-align:justify; 并不能实现两端对齐，为什么会涌现这个情形？我们须要先理解一点点排版知识。
传统书刊的排版印刷对付全体自然段常日采取两端对齐的办法，这样就担保了排版的都雅和良好的阅读体验。但是自然段的末了一行笔墨是左对齐的，由于末了一行文本意味着段落的结束，没有必要连续两端对齐了。
细心的朋友该当已经猜到了，在我们测试中，文本只有一行，意味着它也是末了一行，而CSS的文本对齐办法也遵照末了一行文本默认左对齐的原则，因此不能实现两端对齐。
好在CSS为我们供应了其余一个属性：text-align-last，这个属性用来额外设置段落末了一行文本的对齐办法，因此对付单行文本，我们只须要设置：text-align-last: justify;就可以了，亲测有效。
TIPS：单行文本要想实现文本两端对齐，除了上面说的办法，一定别忘了这个文本须要一个确定的宽度，不设置宽度，文本也就不存在两端。因此这个单行文本不能是行内布局，而该当是块级或者是行内块级布局。
好景不长，用上面的办法实现了文本两端对齐后，创造它只是在PC上有效，但是在IOS的系统浏览器里毫无效果，末了创造在IOS上不支持text-align-last这个属性，因此这个办法并不稳妥。
那么如何办理IOS的兼容问题呢？
动手点只有一个，那便是如何担保单行文本对付CSS来说并不是末了一行？这句话看似很奇怪，实在办理办法很大略，只须要给这个单行文本添加一个伪元素after即可。
someClass: after { content: “”}
由于添加了伪元素，单行文本不再是末了一行，伪元素才是， 同时伪元素的内容为空字符串，并不会对显示造成影响，因此完美办理了这个问题。
把稳：伪元素after不仅要设置content，还要添加 width:100%; 和 display:inline-block; 这是由于：如果不设置宽度，伪元素内容并不会成为第二行，如果display设置成block，又造成了伪元素变成了另一个块级元素，以是要设置为inline-block。
终极的代码：
someClass {text-align:justify; width:300px;}
someClass: after { content: “”; width:100%; display:inline-block;}
