css 文字两端对齐并兼容

 效果图如下：

 

文本两端对齐样式：

display:inline-block;text-align:justify;text-align-last: justify;

justify文本两端对齐，具体解释就看css手册哈，不多讲。

设置这些后，Google浏览器看是没有问题了，其他浏览器测试一下就会发现两端对齐没有生效。

没有生效的原因目前归纳为2种：

1.字体之间需要增加空格，可兼容各大浏览器，如下：

2.text-align:justify;text-align-last: justify;有个特性，就是最后一行不生效。那么只有一行时，第一行又是最后一行的时候，不生效。

解决如下：

因为第一条也是最后一条，不生效，就需要增加一条隐形内容，即为:after内容，但是增加空内容后，会撑开，所以b样式增加overflow: hidden;vertical-align:middle;隐藏超出内容后，并垂直居中显示文字

p b{ color: #dac296; font-weight: normal; height:2rem; line-height: 2rem; font-size: 1rem; display:inline-block;width:5rem;text-align:justify;text-align-last: justify;overflow: hidden;vertical-align:middle;}

/*因为第一条也是最后一条，不生效，就需要增加一条隐形内容，即为:after内容，但是增加空内容后，会撑开，所以b样式增加overflow: hidden;vertical-align:middle;隐藏超出内容后，并垂直居中显示文字*/

p b:after {width: 100%;height: 0px;margin: 0px;line-height:0px;font-size:0px;overflow: hidden; display:inline-block;content: '';}