如何使用純CSS自動調整文本區域的大小

Question

如何使用純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>

Answer 1

它將為您提供支持調整大小的文本區域

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

Answer 2

您不能根據文本內容自動調整大小，但是如果您談論基於屏幕大小的調整大小，則可以。 您正在使用引導程序，因此您可能需要覆蓋css以獲取引導程序具有的文本區域，否則

textarea {
    width: 80%; 
    height: 20%;
}

您想要的寬度和高度百分比。

或者只是使用不同大小的媒體規則，例如

@media (max-width: 420px) {
    #Remarks {
        width: 320px;
        height: 80px;
    }
}
@media (max-width: 767px) {
    #Remarks {
        width: 500px;
        height: 100px;
    }
}

如何使用純CSS自動調整文本區域的大小

問題描述

2 個解決方案

解決方案1
0 2018-05-09 14:12:47

解決方案2
0 2018-05-09 14:25:31

如何使用純CSS自動調整文本區域的大小

問題描述

2 個解決方案

解決方案1 0 2018-05-09 14:12:47

解決方案2 0 2018-05-09 14:25:31

解決方案1
0 2018-05-09 14:12:47

解決方案2
0 2018-05-09 14:25:31