text-indentとtext-alignを一緒に使ってはいけない

こんにちは、エンジニアのさもです。

text-indent効かなくなったときの話です。

結果的には、一緒にtext-alignを使っていたために上手く効いていないように見えていただけでした。

スポンサーリンク

実装したかったもの

こんな感じのものを作りたかったんです

こちらがコードです。

<div class="percent_back">
  <span class="percent">完了率(80%)</span>
</div>

.percent_back{
  width: 400px;
  background-color: #bbbbbb;
  position: relative;
  height: 30px;
}

.percent{
  width: 80%;
  text-align: right;
  position: absolute;
  background-color: #ff64ba;
  text-indent: 38%;
  height: 30px;
  line-height: 30px;
  white-space: nowrap;
  color: #fff;
}

値が大きくなると文字がずれていく

ですが、実際には、値が63%を越えたあたりから、なぜか右の方にずれていく

当たり前でした

原因は、全く意味の無いtext-alignでした。

値が小さいうちは文字列が右寄せだし、タブも効いているので良かったのですが、

値が大きくなってくると、右寄せのせいでバーの進捗に引きずられていきます。

あれやこれやと実装しているうちに付いた、実験の痕跡です。今回の場合は全く意味が無いコードなので消しました。

解決しました

text-alignを消して無事に想定どおりの動きになりましたとさ。

読者登録をしていただけると、ブログを続ける励みになりますので、よろしくお願いします。