流體寬度單線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;