Question

如何使用纯CSS自动调整文本区域大小？

＆＃13;

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

＆＃13;

Answer 1

它会为您提供支持调整大小的文本区域

＆＃13;

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

＆＃13;

Answer 2

您无法根据文字内容自动调整大小，但如果您根据屏幕尺寸调整大小，则可以。你正在使用bootstrap所以你可能需要覆盖css for textareas bootstrap否则它只是

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 个答案: