Question

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

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

加载页面时，文本区域将仅自动设置文本区域的高度，直到找到第一个换行符为止，例如：

对于具有以下文本的文本区域：

This is an

example text

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

This is an

浏览器认为换行符是整个文本的结尾。我该如何解决？

Answer 1

如果使用箭头键向下移动，文本仍会存在，只是默认情况下文本区域不够高，无法显示所有文本。您可以使用rows属性来定义默认情况下textarea应该具有的许多文本行。

或者，如果您想要更多控制，则可以将div与属性contenteditable="true"一起使用。

textarea {
  height: auto;
  overflow: hidden;
  resize: none;
}

/*
* CSS for div with contenteditable="true"
*/
.textarea {
  display: inline-block;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  border: 1px solid;
  padding: 2px;
}

<textarea rows="3">This is an

example text
</textarea>

<div class="textarea" contenteditable="true">This is an

example text
</div>

Answer 2

对于阅读此书的任何人，我想出的解决方案都很简单。有了JQuery，就可以准备好文档：

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

像魅力一样工作。

Answer 3

您可以使用rows属性来设置文本区域的高度。

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

提琴：https://jsfiddle.net/jvw7s1rz/2/

Answer 4

.textarea {
  height: auto;
  overflow: hidden;
  resize: none;
  background-color: #000000;
  color: #ffffff;
  padding-left: 20px;
}

<div class="textarea"><p>This is an</p><p>example text</p></div>

请检查上面的代码。

具有高度的文本区域：自动和换行符

4 个答案: