具有纯 CSS 内容的初始自动高度的文本区域

Question

我一直在寻找一种简单的 CSS 解决方案来使其内容的 texarea 匹配高度。

我不希望在您键入时自动调整大小的文本区域。我有一个文本区域，其中已经包含文本，我希望它与内容匹配。

有没有办法使用 CSS 做到这一点？

Answer 1

不，因为根据定义，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>

Answer 2

这是一个 100% 的 css 方法。

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; */
}

所以基本上这里发生的事情是我们正在填充 textarea 的内容和具有相同内容的另一个兄弟（在本例中为 span）。文本区域的样式更新为与 div 具有相同的字体、填充等。根据您的特定需求，您只需根据需要更新这些内容。但关键是它们要匹配，以便间距和布局相同。

然后我们为 textarea 设置一些属性，使其位置绝对，并采用父级的尺寸。最后将.textarea-mimic > span的内容设置为visibility: hidden。这允许在仅显示文本区域的同时填充尺寸。关闭可见性属性和 textarea 的 display: none 以查看它的实际效果。

另外请注意，如果您希望它实时更新，一些基于 textarea 更新隐藏文本内容的简单 javascript 应该使其动态化。