Текстовая область с начальной высотой авто по содержимому с чистым CSS

Question

Я искал простое CSS-решение, которое бы соответствовало высоте texarea его содержимому.

Я НЕ ХОЧУ, чтобы текстовая область с автоматическим изменением размера изменялась при вводе текста. У меня есть текстовая область, в которой уже есть текст, и я хочу, чтобы он соответствовал содержанию.

Есть ли способ сделать это с помощью CSS?

Answer 1

Как я уже говорил выше, вы можете просто использовать свойство CSS height, чтобы установить высоту текстового поля для размещения предварительно заполненного textarea.

textarea {
  resize:none;
  height:40px;
}

<textarea cols="50">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In rutrum nec ex eget ullamcorper. Donec porttitor nibh non nisi rhoncus, ac varius sapien molestie.</textarea>

Answer 2

Вот 100% способ сделать это.

https://codepen.io/anon/pen/BxLMKK

Обратите внимание, что для этой демонстрации я сделал простую 2-колоночную разметку только для обеспечения контекста, но фактическая важная часть находится в .textbox-mimic div.

HTML:

<div class="container">
  <div>
    <div class="textarea-mimic">
      <span>
        Here's some text that's already here. Here's some text that's already here. Here's some text that's already here. Here's some text that's already here. Here's some text that's already here. Here's some text that's already here.  Here's some text that's already here. Here's some text that's already here. Here's some text that's already here. Here's some text that's already here.
      </span>
    <textarea>Here's some text that's already here. Here's some text that's already here. Here's some text that's already here. Here's some text that's already here. Here's some text that's already here. Here's some text that's already here.  Here's some text that's already here. Here's some text that's already here. Here's some text that's already here. Here's some text that's already here.
        </textarea>
    </div>
  </div>
  <div>
    Some things over here
  </div>
</div>

CSS:

.container {
  outline: 2px solid #000;
  display: flex;
  width: 500px;
  height: 100%;
  margin: 0 auto;
}

.container > div {
  flex: 1;
  outline: 1px solid #cc00cc;
  padding: 8px;
}

.container > div > .textarea-mimic {
  position: relative;
}
.container > div > .textarea-mimic > span {
  visibility: hidden;
}
.container > div > .textarea-mimic > textarea {
  width: 100%;
  height: 100%;
  overflow: hidden;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  font: inherit;
  overflow: hidden;
  resize: none;
/*   display: none; */
}

Итак, в основном здесь происходит то, что мы заполняем содержимое текстовой области и другого брата (в данном случае span) тем же контентом. Стили текстовой области обновляются, чтобы иметь тот же шрифт, отступы и т. Д., Что и у div. В зависимости от ваших конкретных потребностей вы просто обновляете их по своему усмотрению. Но это очень важно, чтобы они совпадали, так что расстояние и расположение идентичны.

Затем мы устанавливаем некоторые свойства для текстовой области, чтобы сделать ее абсолютной и принять размеры родительского элемента. Наконец, содержимое .textarea-mimic > span установлено на visibility: hidden. Это позволяет заполнять размеры, показывая только текстовую область. Отключите свойство видимости и display: none текстовой области, чтобы увидеть его в действии.

Также обратите внимание, что если вы хотите, чтобы это обновлялось в режиме реального времени, некоторый простой javascript, который обновляет содержимое скрытого текста на основе текстовой области, должен сделать его динамичным.

Answer 3

Нет, потому что, по определению, textarea не соответствует его содержанию.

Однако вы можете использовать <div contenteditable="true"></div> и оформить его так, чтобы он выглядел и действовал как textarea.

.textarea {border:1px solid #e0e0e0; max-height:100px; overflow-y:scroll;}

<div contenteditable="true" class="textarea">jdsklf ;askf; fs;dlfkj sad;flkasdj f;laskfj as;lfkajsd f;lasdkfj asl;dkfj sad;lfkasjd f;laskdjf a;sldfkj asdf;lkasdjf ;lasdkfj asd;lfkjsad f;laksdjf ;alsdkfjs ad;lfkjsad f;lksadjf ;lasdkfjasdl;fk jasdl;fkj asdf;lksadj f;lsadkfj sad;lfkjsd f;lksadjf; lsadkfjsda;lfk jsd;lfk jsdf</div>