我正在尝试在其中创建一个带有流体宽度textarea的div。 div的宽度应至少为3em,最多为12em,否则与textarea的宽度完全相同。我有这个工作。 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;
});
答案 0 :(得分:1)
在CSS中使用:
white-space: nowrap;
overflow: hidden;
编辑此内容已弃用:
您可以将wrap="off"
设置为textarea
上的属性吗?
编辑:说溢出:隐藏; (以下评论)原文:overflow:auto;