Question

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

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

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

Answer 1

不，因为根据定义，textarea的大小不会根据其内容而定。

但是，您可以使用<div contenteditable="true"></div>并将其设置为外观并像textarea一样。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

如上所述，您只需使用CSS height属性设置文本框的高度即可容纳预先填充的textarea。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

这是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和另一个兄弟（在这种情况下）的内容。文本区域的样式更新为与div具有相同的字体，填充等。根据您的具体需求，您可以根据需要更新这些内容。但它的关键是匹配，因此间距和布局是相同的。

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

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

具有初始自动高度的Textarea，内容为纯CSS

3 个答案: