文字两端对齐的问题
文字是在下的里，text-align设置为justify，的margin左右为0，但是实际上文字的右边会有一段空隙，左右两边距离浏览器边界不相等，这个问题要怎么解决？而且文字中英文的显示也很不理想
这个问题折磨我好久了！拜托大神求救啊！QAQ
<section id="banner">
<div class="inner">
<footer>
<p>文字</p>
</footer>
</div>
</section>
css:
section {
margin: 0;
}
#banner2 {
padding: 6em 0;
text-align: center;
}
#banner2 .inner {
background: none;
display: block;
padding: 0 1.5em;
text-align: center;
}
#banner2 .inner footer {
margin-top: 2em;
margin-right: auto;
margin-left: auto;
text-align: center;
}
#banner2 .inner p {
text-align: justify;
margin: 0;
}版权声明：本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
-
以下trick可以缓解：
- em宽度 + 水平居中
中文字体没有kerning一说，一个中文字符就是1em。
设置容器宽度时用em做单位，比较适合中文排版。
http://jsfiddle.net/9a6hw/1/点击预览
（没有完全严格地两端对齐，是由于禁则的缘故，逗号不能作为一行的起始。逗号把最后一个字拐到了第二行。浏览器应该还没有实现平面排版中的标点悬挂）
- 针对text-align: justify优化英文显示
text-align: justify最坑爹的地方在于……它对两端对齐的处理是依赖于空格的。
http://jsfiddle.net/9a6hw/5/点击预览
JSFIDDLE的下方示例的两端对齐的实现方式……其实就是在text-align: justify的基础上，在中英文连接部分添加了空格。
除了手动在中英文连接部分添加空格以外，还可以用JS自动处理文本
- 面向未来
text-align: justify的定义既是“文本将按照‘text-justify’属性所指定的方法两端对齐。”
text-justify原本是IE系列的私有定义，现已加入CSS3超值午餐草案，见W3C Working Draft。
text-spacing（见W3C Working Draft）则可以帮助我们自动在表意字和非表意字之间创建额外空格（而不是像上面一样惨兮兮的JS加空格）。
面向未来的浏览器实现，符合我们预期的，是这样的代码：
p {
text-align: justify; -ms-text-justify: inter-ideograph; text-justify: inter-ideograph; text-spacing: ideograph-alpha;}
可惜它们基本上没有被支持。2019-07-17 19:14:46赞同 展开评论 - em宽度 + 水平居中