可调整大小的TextArea达到一定的大小

时间:2017-07-26 06:04:16

标签: html css twitter-bootstrap

我在Angular4 / Bootstrap3中创建一个文本区域字段,以便在IE11上运行。

文本区域将预先填充一些文字

<textarea [value]="mydata" class="form-control" rows="5"></textarea>

这可以按照人们期望的方式工作。显示5行,如果文本超出可以装入5行的内容,则会显示滚动条。如果文本小于空,则在文本区域中显示空格。

我想要实现的与默认行为略有不同。我希望textarea可以调整大小,但大小不应超过一定数量的行。可以说最大大小设置为5行。 因此,如果要显示的文本可以在1行中拟合,则文本区域仅显示1行。如果它可以安装在4行,它会扩展到4行。如果它可以安装在10行中,那么它最多可以扩展到5行,并显示剩余文本的滚动条。

这种行为可能吗?我已经使用了行作为示例,但是如果可以使用height属性或其他东西来实现,我也可以使用它。

1 个答案:

答案 0 :(得分:0)

您可以使用一点CSS实现此目的,并使用max-height属性:

textarea {
    overflow-y:scroll
    max-height:100px; /* change to a height you see fit */
}

如果不设置默认高度,文本区域将足够高,以适应任何低于max-height的内容,当它达到它时,它将开始滚动。

另外,从rows删除textarea属性。