最新消息:文章中包含代码时,请遵守代码高亮规范!

关于css属性text-align:justify 的问题【原创】

杂项 Kate 181浏览 0评论

相信很多前端的小伙伴们在写表单的时候都会遇到输入框或者其他的前面文字描述两端对齐的问题,很多人肯定会想到text-align:justify ;这个属性,然而在我最近写的时候发现一个问题,有的时候这个属性不起作用,这个时候我必须要在其后面面加一个内联块状元素宽度为100%的才可以起作用。如:

 

<div class="contain">关于两端对齐的问题<span></span></div>

.contain{
  text-align:justify;
}

span{
  display:inline-block;
  width:100%;
}

最后发现了原因所在

这个是因为text-align不会处理被打断的行和最后一行。因为我的文字只占了一行,所以也是最后一行了,所以text-align设置为justify不会产生任何效果。
解决方法是使用text-align-last,并将其设置为justify。
不过不幸的是,text-align-last不是所有浏览器支持。

所以对于不支持text-align-last的,可以在最后一行人工生成两行文本,然后把第二行隐藏了,那么我们要现实的第一行自然就可以实现两端对齐了。

而我的span是inline-block,也可以设置宽度(100%),那么这个时候内联匿名盒的宽度超过行盒,浏览器会将其拆成两行,自然第一行文本的text-align效果就生效了。我的实现刚刚好是上面的第二个实现方法。



转载时请注明出处及相应链接,本文永久地址:https://blog.yayuanzi.com/23887.html


pay_weixin
pay_weixin
微信打赏
pay_weixin
支付宝打赏
感谢您对作者Kate的打赏,我们会更加努力!    如果您想成为作者,请点我

您必须 登录 才能发表评论!