为了账号安全,请及时绑定邮箱和手机立即绑定

聊一聊CSS文本两端对齐

标签:
Html/CSS

今天我们来聊一聊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: “”}

由于添加了伪元素,单行文本不再是最后一行,伪元素才是, 同时伪元素的内容为空字符串,并不会对显示造成影响,因此完美解决了这个问题。


综上所述,解决文本两端对齐最稳妥的方式是:给元素设置text-align: justify; 同时给这个元素添加一个伪元素after,伪元素内容为空即可。


第一次纯手机手戳,有误或者不完善之处敬请谅解,欢迎评论指出。



作者:不再是从乾
链接:https://www.jianshu.com/p/fcb3ae7242ef


点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消