流体宽度单线textarea

Question

我正在尝试在其中创建一个带有流体宽度textarea的div。 div的宽度应至少为3em，最多为12em，否则与textarea的宽度完全相同。 我有这个工作。 看小提琴 。

当textarea填满div时，它会创建一个换行而不是溢出到左边，这就是我想要的效果。 任何想法如何实现这一目标？

编辑：此代码基于A List Apart关于扩展文本区域的文章 。

HTML

<div><pre><span></span><br></pre>
  <textarea autofocus placeholder='Note'></textarea>
</div>

CSS

div {
    border: 1px solid grey;
    position: relative;
    display: inline-block;
/*     overflow: hidden; */
    height: 1.3rem;
    min-width: 3rem;
    max-width: 12rem;
}
textarea {
    border: 1px solid blue;
    resize: none;
    background: rgba(0,0,255,.5);
    padding: 0;
    width: 100%;
}
textarea, pre {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    margin: 0;
/*     visibility: hidden; */
}
pre {
    border: 1px solid pink;
    position: relative;
    max-width: 100%;
}
* {
    font: 1rem arial;
}

JS

var textarea = document.querySelector('textarea');
var span = document.querySelector('span');
textarea.addEventListener('input', function() {
  span.textContent = textarea.value;
});

Answer 1

在你的CSS使用中：

white-space: nowrap;
overflow: hidden;    

编辑此内容已弃用：您可以将wrap="off"为textarea上的属性吗？

编辑：说溢出：隐藏; （以下评论）原文：overflow：auto;