Javascript text带高度的区域：自动和换行

如果我有一个文本区域，上面有一些文本，并且文本上有一些换行符，如果我将样式设置为：

textarea {
  height: auto;
  overflow: hidden;
  resize: none;
}

当我加载页面时，文本区域只会自动设置文本区域的高度，直到找到第一个换行符，例如：

对于包含此文本的文本区域：

This is an

example text

加载页面时，文本区域将显示为：

This is an

---

Browser认为换行符是整个文本的结尾。如何修复它？

您可以使用

行

属性设置文本区域的高度

<textarea rows='100'>this is an
example text</textarea>

这是一个
示例文本

---

小提琴：

如果使用箭头键向下移动，文本仍然存在，只是默认情况下文本区域不够高，无法显示所有文本。您可以使用

rows

属性来定义默认情况下textarea应该包含的多行文本

或者，如果您想要更多的控制，可以使用属性为

contenteditable=“true”

的

div

textarea{
高度：自动；
溢出：隐藏；
调整大小：无；
}
/*
*带有contenteditable=“true”的div的CSS
*/
.文本区{
显示：内联块；
空白：预包装；
溢出包装：断开单词；
边框：1px实心；
填充：2px；
}

这是一个
示例文本
这是一个
示例文本

对于阅读本文的任何人来说，我提出的解决方案都很简单。使用JQuery，在文档就绪时：

$( document ).ready(function() {
  var trueHeight = $( '#your_textarea' ).prop( 'scrollHeight' );
  $( '#your_textarea' ).height( trueHeight );
});

工作起来很有魅力。

.textarea{
高度：自动；
溢出：隐藏；
调整大小：无；
背景色：#000000；
颜色：#ffffff；
左侧填充：20px；
}

---

这是一个
示例文本

需要是自动的，如果我只有一行，我不需要99行空行，也不需要100行。可以将其设置为所需的任意行数。如果你只有一行文字，那么这无论如何都不会是一个问题。例如，如果您有6行（其中5行是隐藏的），那么您可以只使用

谢谢，contenteditable是一个很好的解决方案，我不能使用它，因为我的应用程序（rails）在表单上使用我的文本区域，以便在ajax请求中发送，否则我会这样做。