离子中输入框中的字母间距

Question

我想在输入框中均匀分隔6个字母，如下所示

而不仅仅是打包在一起。

我假设将输入只有6个字符。

我知道有一个属性letter-spacing可以处理这个问题。

但是，由于离子框架响应，输入框的宽度会有所不同。因此，我不能将数字硬编码为字母间距。

是否有任何方法可以处理字母间距问题，无论是在html / css / ts中？

Answer 1

正如@Yug Kapoor所述，您可以使用letter-spacing单位的vw值

代码示例可以是这样的：

.div {
  width: 100%;
  text-align: center;
}

.input {
  width: 40%;
  letter-spacing: calc(6vw - 12px);
  padding-left: calc(6vw - 12px);
  text-align: center;
}

<div class="div">
  <input type="text" class="input" value="123456" />
</div>

而且，你可以查看这个链接;

http://caniuse.com/#feat=viewport-units

http://caniuse.com/#search=calc

viewport percentage