2016-10-12 07:56发布
为什么单独设置text-align:justify;不起作用，非要在后面加一个内联块状元素宽度为100%的才可以？
<p class="center">我是两端对齐文字端对齐文字<span></span></p>
.center{ text-align:justify; } span{ display:inline-block; width:100%; }
而你的span是inline-block，也可以设置宽度（100%），那么这个时候内联匿名盒的宽度超过行盒，浏览器会将其拆成两行，自然第一行文本的text-align效果就生效了。你的实现刚刚好是上面的第二个实现方法。
一行文本不进行处理。还有就是强制换行的也不处理。所以你强制占满了一行他才处理。
最后，附上text-align-block的各个浏览器支持情况：http://caniuse.com/#search=te...
所以对于不支持text-align-last的，可以在最后一行人工生成两行文本，然后把第二行隐藏了，那么我们要现实的第一行自然就可以实现两端对齐了。
这个是因为text-align不会处理被打断的行和最后一行。因为你这里的文字只占了一行，所以也是最后一行了，所以text-align设置为justify不会产生任何效果。解决方法是使用text-align-last，并将其设置为justify。不过不幸的是，text-align-last不是所有浏览器支持。
最多设置5个标签!
{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://wenda.whatsns.com/data/attach/logo/logo.png', '推荐 大米弟弟 的问题《text-align:justify;不起作用是怎么回事?》','https://wenda.whatsns.com/q-300621.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
付费偷看金额在0.1-10元之间
而你的span是inline-block，也可以设置宽度（100%），那么这个时候内联匿名盒的宽度超过行盒，浏览器会将其拆成两行，自然第一行文本的text-align效果就生效了。你的实现刚刚好是上面的第二个实现方法。
一行文本不进行处理。还有就是强制换行的也不处理。所以你强制占满了一行他才处理。
最后，附上text-align-block的各个浏览器支持情况：
http://caniuse.com/#search=te...
所以对于不支持text-align-last的，可以在最后一行人工生成两行文本，然后把第二行隐藏了，那么我们要现实的第一行自然就可以实现两端对齐了。
这个是因为text-align不会处理被打断的行和最后一行。因为你这里的文字只占了一行，所以也是最后一行了，所以text-align设置为justify不会产生任何效果。
解决方法是使用text-align-last，并将其设置为justify。
不过不幸的是，text-align-last不是所有浏览器支持。
一周热门 更多>