CSS 实现文字两端对齐

text-align:justify;
text-align:justify 属性是全兼容的,使用它实现两端对齐,需要注意在模块之间添加[空格/换行符/制表符]才能起作用,同样,实现文本对齐也是需要在字与字之间添加[空格/换行符/制表符]才能起作用


(android/ios)解决方案:

<div class="attrName">
    <span class="linNormal"
        {text&&text.split('').join(' ')}
    </span>
</div>
.attr-name{
  width: 82px;
  line-height: 0;
  display: inline-block;
  text-align:justify;
  text-justify:distribute-all-lines;/*ie6-8*/
  text-align-last:justify;/* ie9*/
  -moz-text-align-last:justify;/*ff*/
  -webkit-text-align-last:justify;/*chrome 20+*/
  &:after{
    content: "";
    display: inline-block;
    width: 100%;
  }
}

.lin-normal{
  line-height: normal;
}

你可能感兴趣的:(技术问题)