【css控制段落文字对齐】谈谈CSS文本两端的对齐方式。

今天我们来谈谈CSS文本两端的对齐方式。

天的原因是这样的。在Review的一位同事制作的页面上，发现多条文字之间写着很多空格，问我为什么这么做。他说，设计中该文本的渲染宽度必须一致，但由于字符数不同，所以在字符数较少的文本中添加了空格，实现了文本的两端对齐(字符均匀分布)。

通过添加空格字符来实现文本两端对齐，除了不优雅、容易受辱外，还有三个不同的问题。

1.不同的浏览器、移动设备，空白字符的显示宽度略有不同，不影响一个空格，但不能保证多个空格一致，很可能没有对齐或换行。

2.不能修改任何页面。如果文本需要更换，更换后字数发生变化，则意味着需要重新调整之前的空格数，对维护非常不利。

3.有些页面上的文本可以由用户复制，但复制后发现包含很多空白字符，需要编辑两次。

因此，在日常开发中，不要使用空格字符进行两端对齐，而应使用标准CSS文本对齐属性来解决。

CSS文本对齐属性text-align

此属性通常用作三个值。

左：左对齐

右对齐：右对齐

中心：居中对齐

此外，还有属性值justify。这意味着文本两端对齐。也就是说，文本均匀分布在固定宽度内，两侧不会出现空格。那么，用这个属性能很好地实现文本两端对齐吗？

测试结果显示，单行文本通过了text-align:justify。不能实现两端对齐，为什么会发生这种情况？我们首先要了解一些排版知识。

传统书籍的排版印刷一般通过整个自然段的两端对齐，保证排版的美观和良好的阅读体验。但是，自然段落的最后一行字符左对齐，因为最后一行文本意味着段落的结束。因此，不必继续两端对齐。

细心的朋友们可能在我们的测试中注意到只有一行文字。也就是说，文本也是最后一行，而CSS中的文本对齐也遵循最后一行文本的默认左对齐原则，因此无法实现两端对齐。

幸运的是，CSS提供了另一个名为text-align-last的属性，用于进一步设置段落最后一行文本的对齐方式。因此，对于单行文本，只需设置text-align-last3360 justify。没关系。直接测量是有效的。

TIPS:不要忘记，单行文本除了上述方法外，还需要此文本有一定的宽度，才能实现文本两端对齐。如果不设置宽度，则文本的两端不存在。因此，这种单行文本应该是块级或内嵌块级布局，而不是内嵌布局。

好景不长。用上述方法实现文本两端对齐后，发现它只在PC上有效，但在IOS的系统浏览器上没有任何效果，最终发现IOS不支持名为text-align-last的属性，因此这种方式不安全。

那么，如何解决IOS兼容性问题？

起点只有一个。换句话说，如何保证单行文本不是CSS的最后一行？这句话看起来很奇怪，但解决方法很简单。您可以将伪元素after添加到此单行文本中。

some class : after { content : " " }

由于添加了伪元素，单行文本不再是最后一行。伪元素是。此外，由于伪元素的内容是空字符串，不影响显示，因此完全解决了此问题。

注意：伪元素after不仅添加了content，还添加了width:100%。和display : inline-block；因为如果不设置宽度，伪元素内容将不会成为第二行，display将设置为block，伪元素将成为其他块级元素，因此必须设置为inline-block。

最终代码：

some class { text-align 3360 justify；Width:300px}

some class : after { content 3360 " "；width :100%；display : inline-block；}