CSS 更改文本区域的大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/47147507/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Change size of textarea
提问by Nello
I currently have a textarealike this:
我目前有一个textarea这样的：
<textarea matInput rows="5" cols="40" placeholder="text"></textarea>
However, it is always the same size.
但是，它始终是相同的大小。
Any idea on how to change the size of the textarea?
关于如何更改 的大小的任何想法textarea？
回答by Alexander Abakumov
Depending on what you've meant by:
取决于你的意思：
However, it is always the same size.
但是，它始终是相同的大小。
There are two options.
有两种选择。
OPTION 1 (STATIC size depending on rows\ cols):
选项 1（静态大小取决于rows\ cols）：
Currently, only rowsaffects the Material textareaheight, colsdoesn't change its width.
目前，只rows影响材质textarea高度，cols不改变其宽度。
Therefore for increasing width, we have to use the CSS widthproperty on a mat-form-fieldcontaining our textarea:
因此，为了增加宽度，我们必须width在mat-form-field包含我们的 的上使用 CSS属性textarea：
<mat-form-field style="width: 300px;">
<textarea matInput rows="5" cols="40" placeholder="text"></textarea>
</mat-form-field>
OPTION 2 (DYNAMIC size to fit textareacontent):
选项 2（适合textarea内容的动态大小）：
In Material 6, CdkTextareaAutosizedirective was added.
在材料 6 中，CdkTextareaAutosize添加了指令。
From an official docs:
来自官方文档：
The cdkTextareaAutosize directive can be applied to any
<textarea>to make it automatically resize to fit its content. The minimum and maximum number of rows to expand to can be set via thecdkAutosizeMinRowsandcdkAutosizeMaxRowsproperties respectively.
cdkTextareaAutosize 指令可以应用于 any
<textarea>以使其自动调整大小以适应其内容。要扩展的最小和最大行数可以分别通过cdkAutosizeMinRows和cdkAutosizeMaxRows属性设置 。
And here's a simplified example from there:
这是那里的一个简化示例：
<mat-form-field>
<mat-label>Autosize textarea</mat-label>
<textarea
matInput
cdkTextareaAutosize
cdkAutosizeMinRows="1"
cdkAutosizeMaxRows="5">
</textarea>
</mat-form-field>
NOTE:matTextareaAutosizementioned in other answers is deprecated and will be removed in the next major release. The official docsalready use cdkTextareaAutosizeinstead.
注意：matTextareaAutosize不推荐使用其他答案中提到的内容，并将在下一个主要版本中删除。在官方的文档已经使用cdkTextareaAutosize来代替。
回答by batbrain9392
Here's an example :
这是一个例子：
<mat-form-field>
<mat-label>Description</mat-label>
<textarea matInput formControlName="description" matTextareaAutosize matAutosizeMinRows=1 matAutosizeMaxRows=5></textarea>
</mat-form-field>
回答by Mohammad Dayyan
Angular materials 7.2:
https://material.angular.io/components/input/examples
角材料 7.2：https:
//material.angular.io/components/input/examples
<mat-form-field>
<mat-label>Autosize textarea</mat-label>
<textarea matInput cdkTextareaAutosize
cdkAutosizeMinRows="2"
cdkAutosizeMaxRows="5"></textarea>
</mat-form-field>
Pay attention to cdkTextareaAutosize, cdkAutosizeMinRows, cdkAutosizeMaxRows
注意cdkTextareaAutosize, cdkAutosizeMinRows,cdkAutosizeMaxRows
回答by trees_are_great
See example. It is important to add css to the form to specify the width:
参见示例。在表单中添加 css 来指定宽度很重要：
.example-form {
min-width: 150px;
max-width: 500px;
width: 100%;
}
and also css to the textarea:
还有 css 到 textarea：
.example-full-width {
width: 100%;
}
If you do not add the css to the form, then the expand icon displays in the incorrect position.
如果您不将 css 添加到表单中，则展开图标会显示在不正确的位置。
回答by grumbler_chester
You can try to adjust the hight of your texarea by applying matTextareaAutosizeand assigning values for properties matAutosizeMinRowsand matAutosizeMaxRows.
您可以尝试通过应用matTextareaAutosize和分配属性matAutosizeMinRows和 的值来调整 texarea 的高度matAutosizeMaxRows。
See https://material.angular.io/components/input/apifor additional details.
有关其他详细信息，请参阅https://material.angular.io/components/input/api。
回答by Jonathan
Angular 7.3.7:
角 7.3.7：
<textarea [matTextareaAutosize] matInput placeholder="Leave a comment"></textarea>
