javascript - 流体宽度单行文本区域

Question

我正在尝试创建一个内部带有可变宽度文本区域的 div。 div 的宽度应至少为 3em，最多为 12em，否则与文本区域的宽度完全相同。我有这个工作。 See fiddle .

当 textarea 填满 div 时，它会创建一个换行符而不是向左溢出，这就是我想要的效果。有什么想法可以实现吗？

编辑:此代码基于 A List Apart's article on Expanding Text Areas .

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 的属性吗？

编辑:说溢出:隐藏； (根据下面的评论)原文:溢出:自动；