CSSで文字の両端揃えを実現

2504 ワード

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;
}