分类导航

不同浏览器下兼容文本两端对齐

发布时间：2016年12月02日作者：文章转自网络，版权归原作者所有，反馈可立刻删除 (该文来自笔记，点击查看原文)

在form表单的前端布局中，我们经常需要将文本框的提示文本两端对齐，例如：

万码学堂,电脑培训,计算机培训,Java培训,JavaEE开发培训,青岛软件培训,软件工程师培训

比较粗暴的做法是在需要隔离边距的文本中加标签，然后分别控制每个文字的边距，这种方法比直接加空格或者占位符更精准，我之前也都是这么做的。但是写的多了之后开始思考能不能抽象出来用于更多的场景？让代码更好看一些？维护成本更低一些？

1、首先想到是能不能直接靠css解决问题

css

.test-justify {
    text-align: justify;}

html

 <div class="test-justify">
        测试文本 </div>

万码学堂,电脑培训,计算机培训,Java培训,JavaEE开发培训,青岛软件培训,软件工程师培训

好吧，text-align:justify完全无效，不甘心，于是用一段文本测试了下，效果如下：

万码学堂,电脑培训,计算机培训,Java培训,JavaEE开发培训,青岛软件培训,软件工程师培训

原来这个属性是针对段落文本两端对齐的，接着试一下text-align-last: justify这个属性

css

.test-justify {
    text-align: justify;}

万码学堂,电脑培训,计算机培训,Java培训,JavaEE开发培训,青岛软件培训,软件工程师培训

效果是达到了，但缺点是完全不兼容ie和safari浏览器。