Текстовая область с высотой: авто и разрывы строк

Question

Если у меня есть текстовая область с некоторым текстом, и у текста есть некоторые разрывы строк, если я установлю свой стиль на:

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

Когда я загружаю страницу, тогда текстовая областьбудет только автоматически устанавливать высоту текстовой области, пока не будет найден первый разрыв строки, например:

Для текстовой области с этим текстом:

This is an

example text

Когда страница загружена, текстовая область будетбудет отображаться как:

This is an

Браузер считает, что разрывы строк - это конец всего текста.Как мне это исправить?

Answer 1

.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>

Пожалуйста, проверьте вышеуказанный код.

Answer 2

Текст все еще там, если вы используете клавиши со стрелками для перемещения вниз, просто текстовая область по умолчанию не достаточно высока, чтобы показать весь текст.Вы можете использовать атрибут rows, чтобы определить, сколько строк текста должно иметь текстовое поле по умолчанию.

В качестве альтернативы, если вы хотите больше контроля, вы можете использовать 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 3

Для любого, кто читает это, решение, которое я нашел, простое.С JQuery, на готовом документе:

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

Работает как шарм.

Answer 4

Вы можете использовать атрибут rows для установки высоты текстовой области.

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

Fiddle: https://jsfiddle.net/jvw7s1rz/2/