如果文本输入太长，则输入停止默认对齐

Question

我有一个输入字段，最大长度为4个字符。看起来这4个字符被边框分隔，实际上是3行显示在输入字段上方。

如果我输入第四个字符，则所有字符都向左跳一点，因为如果输入了第五个字符，则不会看到它。如果焦点不在输入字段上，则字符很好地对齐，就像我希望的那样。

有没有办法用css，js或jquery解决这个问题，或者这是浏览器中无法更改的行为？

.pin-field-wrapper {
  width: 175px;
  height: 72px;
  border-radius: 0px 13px 13px 0px;
  border-left: 1px solid #2A2A2A;
  font-size: 20px;
  display: inline-block;
  vertical-align: top;
  overflow: hidden;
  position: relative;
}

.pin-field {
  width: 100%;
  height: 100%;
  border-radius: 0px 13px 13px 0px;
  text-align: left;
  font-size: 44px;
  letter-spacing: 21px;
  padding-left: 8px;
  border: none;
  box-shadow: inset 0px 6px 6px -4px rgba(0, 0, 0, 0.96);
}

.pin-field-separator {
  position: absolute;
  height: 100%;
  width: 1px;
  background: #000;
  top: 0px;
  cursor: text;
}

.separator1 {
  left: 25%;
}

.separator2 {
  left: 50%;
}

.separator3 {
  left: 75%;
}

<div class="pin-field-wrapper">
  <input type="text" class="pin-field" placeholder="0000" maxlength="4">
  <div class="pin-field-separator separator1"></div>
  <div class="pin-field-separator separator2"></div>
  <div class="pin-field-separator separator3"></div>
</div>

Answer 1

您的字体大小与input字段的宽度不匹配。只需将其扩大或缩小字体大小。

＆＃13;

＆＃13;

.pin-field-wrapper {
  width: 200px;
  height: 72px;
  border-radius: 0px 13px 13px 0px;
  border-left: 1px solid #2A2A2A;
  font-size: 20px;
  display: inline-block;
  vertical-align: top;
  overflow: hidden;
  position: relative;
}

.pin-field {
  width: 100%;
  height: 100%;
  border-radius: 0px 13px 13px 0px;
  text-align: left;
  font-size: 44px;
  letter-spacing: 21px;
  padding-left: 8px;
  border: none;
  box-shadow: inset 0px 6px 6px -4px rgba(0, 0, 0, 0.96);
}

.pin-field-separator {
  position: absolute;
  height: 100%;
  width: 1px;
  background: #000;
  top: 0px;
  cursor: text;
}

.separator1 {
  left: 20%;
}

.separator2 {
  left: 44%;
}

.separator3 {
  left: 69%;
}

＆＃13;

<div class="pin-field-wrapper">
  <input type="text" class="pin-field" placeholder="0000" maxlength="4">
  <div class="pin-field-separator separator1"></div>
  <div class="pin-field-separator separator2"></div>
  <div class="pin-field-separator separator3"></div>
</div>

＆＃13;

＆＃13;

＆＃13;