鍍金池/ 問答/HTML/ 微信小程序input標(biāo)簽中文字被遮蓋的問題

微信小程序input標(biāo)簽中文字被遮蓋的問題

wxml代碼

<input type='text' placeholder='請輸入驗(yàn)證碼' 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;
}

圖片描述

疑惑：明明還有空間的，為什么文字會顯示不全

回答
編輯回答
祉小皓

不知道是不是bug，微信小程序里input寬度縮小，input可輸入文字的區(qū)域會縮小的更多，比如說你把input寬度設(shè)置為90%，則input文字輸入可顯示的區(qū)域可能只有80%左右。
目前的解決方法：在input輸入框外面套一層view，通過改變view的寬度控制input的長度，這樣不會影響文字顯示

2018年2月22日 00:56
編輯回答
影魅

發(fā)現(xiàn)只要手動設(shè)置input的寬度 就會出現(xiàn)這樣的問題

2017年8月8日 05:56
編輯回答
不討喜

發(fā)現(xiàn)同樣的問題，看了下input的默認(rèn)樣式?jīng)]問題，不知是不是Bug

2018年2月6日 16:30
編輯回答
荒城

遇到這種情況應(yīng)該要打開你的調(diào)試工具，看看input上有沒有還添加了其他樣式，例如padding

2018年9月3日 23:51