曲径通幽论坛

标题: text-align:justify 两端对齐 [打印本页]

作者: beyes 时间: 2015-12-21 01:54
标题: text-align:justify 两端对齐
有时候可能需要两端对齐，那么需要用到 text-align:justify 属性。在用该属性时，应该配合 width 宽度属性来使用，否则书写的内容会一直走到浏览器窗口的右侧尽头然后换行。

如果写的是英文，那么仅用该属性即可；如果写的内容是中文，那么还需要加上 text-justify:distribute-all-lines;  这个属性。

先试看一下，不加 text-justify:distribute-all-lines;  时显示的效果：
[attach]4236[/attach]

上图可以看到，右侧是不太整齐的。那么将上 text-justify:distribute-all-lines;  看看：

<p style="text-align: justify; text-justify:distribute-all-lines; width:200px">
新浪体育讯　　
在击败阿根廷河床后，巴萨拿到了世俱杯的冠军，这也是巴萨本年度拿到的第五个冠军奖杯，今年的巴萨足够伟大，球队先后战胜过英超、法甲、德甲和意甲冠军，此外还战胜了欧洲联赛杯冠军、亚洲冠军和美洲冠军，堪称世界足坛的王中王，然而和2009年瓜迪奥拉的“梦三”相比，巴萨仍有遗憾，那就是未能拿下西班牙超级杯冠军，在冠军数量上比瓜迪奥拉的六冠王少一冠。
</p>

复制代码

显示效果：
[attach]4237[/attach]

如上图可见，对齐效果已经非常完美。

欢迎光临曲径通幽论坛 (http://www.groad.net/bbs/)

Powered by Discuz! X3.2