输入填充没有间隙

Question

如果我有输入，左边有填充，如下所示：

＆＃13;

＆＃13;

body { background: #f8f8f8 }

input {
  width: 320px;
  background: #fff;
  font: inherit;
  box-shadow: 0 6px 10px 0 rgba(0, 0, 0 , .1);
  border: 0;
  outline: 0;
  padding: 22px 18px;
  color: #999;
  max-width: 90%;
}

＆＃13;

<input type="text" placeholder="Time a bunch of text until I overflow. Notice the gap on the left now?">

＆＃13;

＆＃13;

＆＃13;

当输入溢出时，它会在左侧留下一个令人讨厌的间隙，如下所示：

如何解决？

修改 问题是，当输入溢出时，左边的空间隐藏文本，而我宁愿文本拥抱左边框（当输入溢出时文本和左侧之间没有空格）

Answer 1

尝试此修改

＆＃13;

＆＃13;

body { background: #f8f8f8 }

input {
  width: 428px;
  background: #fff;
  font: inherit;
  box-shadow: 0 6px 10px 0 rgba(0, 0, 0 , .1);
  border: 0;
  outline: 0;
  padding: 22px 18px;
  color: #999;
  max-width: 90%;
}

＆＃13;

<input type="text" placeholder="Time a bunch of text until I overflow. Notice the gap on the left now?">

＆＃13;

＆＃13;

＆＃13;