SS之文本对齐。

免费少儿编程开课了，同学们好！今天分享的知识是设置文本在区域中水平方向的对齐方式。用到的是 css 的 text 的align属性，这个属性的常用值有类似，左对齐，right 右对齐，center 居中对齐。

Justify两端对齐需要注意的是 text line和德瑞权文本方向有关系。如果德瑞权属性是 l tr则默认值为列；如果德瑞权属性是 rtl则默认值为 right。左中右对齐都很简单，一目了然。

但我们会注意到两端对齐这一行并没有达成我们想要的效果，所谓的两端对齐就是文本的第一个字对齐区域的左边界，文本的最后一个字对齐右边界，中间的文本平均分布在区域内。看看代码，确实设置了 text line 为这四个方案。

没有效果的原因是这个属性对最后一行不生效，解决方案是使用 text line last属性，先看看效果，ok，这就是两端对齐。现阶段学习到这里就可以了，但我需要提醒各位同学，text line last的兼容性是有问题的，特别是在苹果的 ios 系统中spare 不支持这个属性，这会导致安卓手机中显示正常，但苹果手机却显示错误。

为了解决这个问题，只需要让文本不是最后一行即可。看这段代码，v到了前面讲过的伪元素 after，在这里在文本后插入了一个内容，宽度是百分之一百，显示方式是内块，超出部分隐藏并设置了高为零。

我用 after用来创建一个伪元素添加一行内容并且将其隐藏。这样要显示的内容就不是最后一行了，这次阀就会生效再次回到浏览器刷新成功。

好了，今天的分享就到这里，所有的案例及相关文档均可向我获取，我们下期见。

想学编程，点点关注。

天我们来聊一聊CSS文本两端对齐。

事情的起因是这样的，在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;}