Question

如何创建一个不强制换行的textarea并扩展其大小以匹配内容而不是显示滚动条？

我需要一个动态宽度的textarea。宽度应该是textarea的最宽线。我的意思是应该没有包装，宽度应该在一条线得到的长度上改变。

Answer 1

指定一个输入侦听器函数，该函数将滚动宽度和高度与元素的外部宽度和高度进行比较。如果它们不同，则根据需要进行设置。

对于CSS，您需要white-space:nowrap来阻止换行，overflow:hidden除去滚动条。

＆＃13;

$('.demo').on('input', function(e){
    this.style.width = '';
    this.style.height = '';
    if(this.scrollWidth > this.clientWidth) this.style.width = this.scrollWidth + 'px';
    if(this.scrollHeight > this.clientHeight) this.style.height = this.scrollHeight + 'px';
})

＆＃13;

.demo {
  white-space: nowrap;
  overflow: hidden;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea class="demo"></textarea>

＆＃13;

textarea的动态宽度，无包装

1 个答案: