大家刚开始学做网页的时候，是不是经常遇到这种情况？明明给段落设置了固定宽度，但文字右边就像被狗啃过一样坑坑洼洼。特别是中文段落，右边总是留出难看的空白，这到底是怎么回事啊？
先别急着往文字里狂敲空格！其实CSS早就给我们准备了一个超好用的属性——text-align: justify。这个属性能让文字像报纸排版那样自动撑满容器宽度，左右两边都对齐得整整齐齐。不过嘛，这里面有几个坑需要注意…
第一步：基本用法搞起来 直接在需要对齐的容器上写text-align: justify就行。比如给所有段落加上： p { text-align: justify; width: 600px; / 必须设置固定宽度 / } 这时候你会发现…怎么英文单词间距变得好大？每个单词之间像被强行拉开似的。别慌，这是因为英文单词中间有空格，浏览器在调整间距时会把整个单词当作一个整体来处理。
遇到英文怎么办？ 加个断词处理就能解决： p { hyphens: auto; word-break: break-word; } 这样长单词就会自动换行断开，不会出现诡异的超大间距啦。不过要注意，中文不需要这些设置，直接justify就能完美工作。
终极难题：最后一行对齐 这时候可能有人要问：”为什么最后一行还是不对齐？” 问得好！因为浏览器默认只对齐能完整填充的行。要让最后一行也强制对齐，得祭出另一个属性： p { text-align-last: justify; } 这样就算最后一行只有三个字，也会被均匀分布在整行里。不过要小心，这样可能会导致最后一行字间距过大，具体情况得看实际内容。
实战注意事项 1. 容器必须设置明确宽度（固定值或百分比） 2. 段落文字不能太少（至少要有两行） 3. 对于单行文本，直接改用text-align: center更靠谱 4. 遇到table单元格对齐，记得给td加上text-align: justify 5. 在移动端使用时，建议加上-webkit-text-justify: inter-word兼容性写法
有同学试了之后发现：”我的文字突然变得好稀疏啊！” 这种情况通常发生在容器太宽而文字太少的时候。试着调整容器宽度，或者适当增加文字内容。实在不行的话，可以配合letter-spacing属性微调字间距。
下次看到网页文字七零八落的时候，别再手动敲空格对齐了。掌握这几个CSS属性，分分钟让你的排版看起来专业又整齐。要是遇到特殊情况搞不定，不妨把代码片段和效果截图发到技术论坛，很多热心老司机都愿意帮忙看问题的！
免责声明：网所有文字、图片、视频、音频等资料均来自互联网，不代表本站赞同其观点，内容仅提供用户参考，若因此产生任何纠纷，本站概不负责，如有侵权联系本站删除！邮箱:207985384@qq.com https://www.ainiseo.com/hosting/35086.html
