微信小程序input标签中文字被遮盖的问题

Question

wxml代码

<input type='text' placeholder='请输入验证码' class='test'></input>

wxss代码

.test{
  margin-top:100rpx;
  width:50%;
}
input {
  display:block;
  height:1.4rem;
  text-overflow:clip;
  overflow:hidden;
  white-space:nowrap;
  font-family:UICTFontTextStyleBody;
  min-height:1.4rem;
}

疑惑：明明还有空间的，为什么文字会显示不全

Answer 1

不知道是不是bug，微信小程序里input宽度缩小，input可输入文字的区域会缩小的更多，比如说你把input宽度设置为90%，则input文字输入可显示的区域可能只有80%左右。
目前的解决方法：在input输入框外面套一层view，通过改变view的宽度控制input的长度，这样不会影响文字显示

Answer 2

遇到这种情况应该要打开你的调试工具，看看input上有没有还添加了其他样式，例如padding

Answer 3

发现同样的问题，看了下input的默认样式没问题，不知是不是Bug

Answer 4

发现只要手动设置input的宽度 就会出现这样的问题