saber酱的抱枕

Fly me to the moon

01/16
07:43
学习

CSS 文字两端分散对齐

现在 CSS 实现文字的两端分散对齐效果已经很简单了,如下我们要把几句话分散对齐:

念 奴 娇

大 江 东 去

千 古 风 流 人 物

谈 笑 间 樯 橹 灰 飞 烟 灭

my name is saber

代码如下:

<style>
	.justify {
		width: 360px;
		text-align: justify;
		text-align-last: justify;
	}
</style>
<p class="justify">念 奴 娇</p>
<p class="justify">大 江 东 去</p>
<p class="justify">千 古 风 流 人 物</p>
<p class="justify">谈 笑 间 樯 橹 灰 飞 烟 灭</p>
<p class="justify">my name is saber</p>

现在时间 2019 年 1 月,以上代码在现在最新版的 Chrome、Firefox、Edge、IE 、手机 QQ 里均测试通过。

text-align: justify; 的意思是文本分散对齐,但如果只有这一条规则,并不会生效,为什么?因为 text-align: justify; 不会对最后一行文本生效。我们的 p 标签里就一行文本,所以也算是最后一行,所以不会生效。于是我们在后面加上 text-align-last: justify; 使最后一行也能分散对齐。

在以前,浏览器对 text-align-last: justify; 支持还不好的时候,得用其他奇技淫巧,比如在文字后面加个标签或者 ::after 伪元素并设置样式让它们“挤”下去成为最后一行,这样文字就不是最后一行了,text-align: justify; 就能生效了。现在不用这么费事了。

那么聪明的小伙伴可能要问了,既然只有一行文字,我们只用 text-align-last: justify; 不就行了吗?很遗憾,Edge、IE 里必须加上前面的 text-align: justify;,Firefox 和 Chrome 其实不需要加这一条。

另外有些小伙伴可能会有端联想,你 这 人 怎 么 打 字 带 空 格?这不能怪我,因为 CSS 规则是西方人制定的,他们的英文单词之间有空格,浏览器就根据空格分词(参考代码最后一句)。汉字中间没空格,浏览器不知道怎么分,所以我们需要手动加空格让浏览器分词。

你可能会说:傻逼浏览器,都 9102 年了你还不会自己分啊?很遗憾,有两个傻逼 Edge、IE 无论如何都必须加空格。Firefox 好一丢丢,网页语言设置成中文时(<html lang="zh">),或者没设置语言属性但你操作系统是中文的,那么 Firefox 就按照中文来解析网页,这时它可以不加空格。

Chrome 无论如何都不需要加空格。即使你指定这是英文文档(<html lang="en">),Chrome 依旧无所畏惧。

谷人希!

ps:谷人希定律:
本站任何关于浏览器兼容性的文章,最后必然转变成谷人希

CSS 文字两端分散对齐