前言这是一篇很短的文章,内容不多。目的是抱怨MDN文档。需要实现下图样式:实现文档结构:
你好
我爱中国
我是谁
第一次尝试很成功简单,使用text-align:justify不是很好吗?p{位置:相对;宽度:6em;文本对齐:对齐;}p:之后{内容:“:”;位置:绝对;right:-4px;}看效果:纳尼?我看一下文档:justify:内联内容是对齐的。文本的间距应使其左右边缘与行框的左右边缘对齐,最后一行除外。这里提醒一下,MDN上text-align的中文版不要看,英文原版要详细。根据文档的意思,最后一行不能应用justify属性的值。难怪它不起作用。在第二次尝试之前,我说我阅读了英文原版文档。好吧,我找到了一个非常好的属性值:justify-all。justify-all:与justify相同,但也强制最后一行对齐。快速尝试:p{width:6em;text-align:justify-all;}这个应该可以,看看效果吧:蛤,为什么没用?F12查看:这是什么操作?属性值实际上是无效的。又仔细看了文档,最后无语了:大哥,你怎么写了一个任何浏览器都不能用的属性值。。。当然,我只是吐槽一下,这个属性应该包含在CSS3规范,但浏览器不执行它。解决方案折腾了一段时间,最终还是得解决问题。我找到了一个叫做text-align-last的属性,可以控制最后一行的文本对齐方式。p{位置:相对;宽度:6em;文本对齐:对齐;text-align-last:justify;}效果就是文章开头的图片。综上所述,写这篇文章就是为了记录text-align-last属性及其应用,同时对MDN文档进行吐槽。除了文中提到的“浪费”justify-all,还有中文版省略justify-all的不严谨行为,多了一个string属性。emmmmm,我觉得英文版比较靠谱。所以我在中文版里加了justify-all,没敢把字符串删掉。。。最后,如果文章有什么错误,请大家指出,万分感谢。