为什么单独设置text-align:justify;不起作用,非要在后面加一个内联块状元素宽度为100%的才可以?
<p class="center">我是两端对齐文字端对齐文字<span></span></p>
.center{
text-align:justify;
}
span{
display:inline-block;
width:100%;
}
为什么单独设置text-align:justify;不起作用,非要在后面加一个内联块状元素宽度为100%的才可以?
<p class="center">我是两端对齐文字端对齐文字<span></span></p>
.center{
text-align:justify;
}
span{
display:inline-block;
width:100%;
}
,承接最佳答案,这种时候就可以借助伪元素了;
span:after {
content:'';
width: 100%;
display: inline-block;
overflow: hidden;
height: 0;
}
刚才也遇到了类似的问题。
设置两头对其的元素,需要是有块的概念的
如 inline-block
或者 block
想 p span 这种 天生的 inline 元素,要重新定义就好了,并不是说在后面增加一个inline-block元素。
3 回答1.9k 阅读✓ 已解决
3 回答1.2k 阅读✓ 已解决
5 回答882 阅读✓ 已解决
2 回答1.3k 阅读✓ 已解决
4 回答1.7k 阅读
3 回答1.2k 阅读✓ 已解决
2 回答1.7k 阅读✓ 已解决
这个是因为text-align不会处理被打断的行和最后一行。因为你这里的文字只占了一行,所以也是最后一行了,所以text-align设置为justify不会产生任何效果。
解决方法是使用text-align-last,并将其设置为justify。
不过不幸的是,text-align-last不是所有浏览器支持。
所以对于不支持text-align-last的,可以在最后一行人工生成两行文本,然后把第二行隐藏了,那么我们要现实的第一行自然就可以实现两端对齐了。
而你的span是inline-block,也可以设置宽度(100%),那么这个时候内联匿名盒的宽度超过行盒,浏览器会将其拆成两行,自然第一行文本的text-align效果就生效了。你的实现刚刚好是上面的第二个实现方法。
最后,附上text-align-block的各个浏览器支持情况:
http://caniuse.com/#search=te...