css设置文字两端对齐

这里讲述css设置文字两端对齐的方式。

css实现文字两端对齐的基本技巧是：

text-align:justify;

text-justify:inter-ideograph;

但是在一些浏览器中还是看不到结果，如IE和chrome，这除了要在块级元素加text-align:justify样式外，还需要在里面加一个空的span元素，并应用样式。如下所示：

.trpara {

    width:43px;

    float: left;

    font-size: 14px;

    color: #666;

    border:1px solid #000;

    text-align: justify;

    display:inline-block;

}

.trpara > span {

    display: inline-block;

    padding-left: 100%;

}

<span class="trpara">中 文 两 端 对 齐<span></span></span>

另外，对于中文还必须用空格隔开汉字，否则也没有两端对齐的效果。英文每个单词都有空格隔开，没有问题。

对齐的大概效果如下：

欢迎阅读、分享，转载和使用请注明出处，文章来自三里河之光-风、物、情

也可承接私活网站建设、小程序，项目实优，联系qq：38623483。项目交流群：315939322。