html - 当空白设置为 nowrap 时，Textarea 不考虑填充

Question

我正在尝试使文本区域元素的行为方式与输入元素的行为方式相同。但是，我在填充方面遇到了问题。将 textarea 上的 white-space 属性 设置为 nowrap 后，不再考虑右侧的填充。

这是我的意思的图片:

CSS:

textarea {
  width: 100%;
  resize: none;
  padding: 10px 15px;
  overflow: hidden;
  white-space: nowrap;
}

input {
  width: 100%;
  padding: 10px 15px;
}

这是 fiddle 的链接:https://jsfiddle.net/b384w0mn/

有什么想法吗？提前致谢!

Answer 1

也许容器会有所帮助？

<div class='container'>
  <div class="textarea-wrapper">
  <textarea placeholder='Enter some textssssssssssssssssssssssssssssssssss' rows='1'></textarea>
  </div>

<input type='text' placeholder='Enter some textssssssssssssssssssssssssssssssssss'>
</div>

* {
  box-sizing: border-box;
}


.container {
  width: 50%;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
.textarea-wrapper {
  padding: 10px 15px;
  border: 1px solid #ccc;
}

textarea {
  width: 100%;
  resize: none;
  overflow: hidden;
  white-space: nowrap;
  border:none;
}

input {
  width: 100%;
  padding: 10px 15px;
}

https://jsfiddle.net/kostasx/cjkq1g86/