Html 当文本区域中的文本到达行的末尾时，如何使其行为类似于输入？

我有一个单行（行）文本区域，我希望当其中的文本到达行的末尾时，它的行为像一个输入

如果这是我的文本区域：

--------------
|input text h|
--------------

下一个字符将导致textarea执行以下操作：

--------------
|ere         |
--------------

其余文本位于上方隐藏的行中，因为我的文本区域有

rows=“1”

我想让它做的是：

--------------
|ut text here|
--------------

这就是输入的行为方式

这里有一个代码笔供它使用：

我试图更改

溢出

和

溢出-x

css属性，但没有效果。
有什么想法吗

（我找不到关于这个的问题，但可能是因为我不确定到底要搜索什么，如果它存在，我很乐意标记为重复。）

---

编辑 我之所以要这样做，是因为在用户按下enter键（或类似键）之前，我的文本区域应该作为一个输入。

---

也就是说，我想成为一个控制行是否以及何时打断为新行的人。

我不确定我的理解是否正确，但如果您将CSS类更改为

.box2 {
  resize: none;
  overflow-x: hidden;
  word-wrap:unset;
}

因此，我们可以删除单词包装并设置

overflow-x:hidden

，它的行为将类似于输入元素，如果需要，请告诉我

---

像这样的事情可能：

.wrapper{
填充物：5px2px；
}
.盒子{
宽度：60px；
大纲：0；
边框：1px纯黑；
}
.box2{
调整大小：无；
}
/*仅将这些样式添加到您拥有的样式中*/
文本区{
高度：15px；
空白：预处理；
溢出包装：正常；
溢出-x：滚动；
}

输入：
文本区域：输入文本h

它的行为与您的代码相同，当我输入另一个字符时，它会打断line@NitzanTomer仅为了理解目的，我的代码在正确答案方面失败的地方：）与您的代码（当我在您添加的codepen链接中尝试时），当我在文本区域中添加另一个字符时，最后一个单词会掉到下一行，这正是我试图避免的。@caramba的答案解决了这个问题。@NitzanTomer好的，也许我给出了错误的链接或其他什么，我没有这样做：）没问题，很高兴你解决了你的问题！我还试图复制您建议的样式更改，但对我无效。也许是浏览器？我使用的是chrome 61，请问您为什么希望

的行为与

完全一样，为什么不使用

字段呢？@caramba好的，忘了解决这个问题，请看我的编辑谢谢，这样就行了！我只更改为

overflow-x:hidden

，因为我不想滚动条，而且也不需要

高度：15px

@NitzanTomer-nice，很高兴它有帮助！快乐编码。