现在 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 文字两端分散对齐
-
Google Chrome 55Windows -
Google Chrome 71Windows my name is saber
不知为什么在我这里看这一句没有体现出来 -
Google Chrome 71Windows 学习一下
前端大佬(`・ω・´)