如何使用纯CSS自动调整文本区域的大小
[英]how to auto resize text area using pure CSS
问题描述
How to auto resize text area using pure CSS? 
如何使用纯CSS自动调整文本区域的大小？
<div> <div> <textarea appAutosize class="form-control new-form-control" [(ngModel)]="FormDataJSON.Remarks" attr.value="{{FormDataJSON.Remarks}}" id="Remarks" name="Remarks" [attr.disabled]="FormDataJSON.FormOptions.Remarks.disabled ? '':null" [attr.readonly]="FormDataJSON.FormOptions.Remarks.readonly ? '':null" [required]="FormDataJSON.FormOptions.Remarks.required" #Remarks="ngModel" onfocus="this.placeholder = 'Enter remarks here' " onblur="this.placeholder = ''" >{{FormDataJSON.Remarks}}</textarea> <label class="control-label new-control-label" for="Remarks">Remarks</label> </div> </div>
2 个解决方案
解决方案1
0 2018-05-09 14:12:47
It will give you a text area that support resizing 它将为您提供支持调整大小的文本区域
<html> <head> <style> div { border: 2px solid; padding: 20px; width: 300px; resize: both; overflow: auto; } </style> </head> <body> <div> <p>To resize: Click and drag the bottom right corner of this div element.</p> </div> </body> </html>
解决方案2
0 2018-05-09 14:25:31
You can't auto resize based on text content, but if your talking about resize based on screen size you can. 您不能根据文本内容自动调整大小，但是如果您谈论基于屏幕大小的调整大小，则可以。 You are using bootstrap so you may need to override the css for textareas that bootstrap has otherwise its just 您正在使用引导程序，因此您可能需要覆盖css以获取引导程序具有的文本区域，否则
textarea {
width: 80%;
height: 20%;
}
what ever percentage you want for width and height. 您想要的宽度和高度百分比。
Or just use media rules for different sizes such as 或者只是使用不同大小的媒体规则，例如
@media (max-width: 420px) {
#Remarks {
width: 320px;
height: 80px;
}
}
@media (max-width: 767px) {
#Remarks {
width: 500px;
height: 100px;
}
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.