可調整大小的文本區域達到一定的大小

我在Angular4/Bootstrap3中創建一個文本區域，並在IE11上運行。可調整大小的文本區域達到一定的大小

文本區域將被預先填入一些文本

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

這工作一個希望它的方式。顯示5行，並且如果文本超出可以放入5行的內容，則顯示滾動條。如果文本少於空白，則會在文本區域中顯示。

我想要實現的是與默認行爲稍有不同。我希望textarea可以調整大小，但大小不應超過特定行數。可以說，最大尺寸設置爲5行。因此，如果要顯示的文本可以放在1行中，那麼文本區域只顯示1行。如果它可以安裝在4排中，則可擴展到4排。如果它可以安裝在10行中，則它最多擴展到5行，併爲其餘文本顯示一個滾動條。

這樣的行爲可能嗎？我已經使用行作爲示例，但如果它可以通過height屬性或其他東西來實現，那我也很好。

2017-07-26 kayasa

如果您有最初適合10行的文本，並將其限制爲5行，則會出現水平溢出。這是你需要的嗎？ – Rubenxfd

是的，這就是我需要的。但是，對於少於5行的文本，我不想顯示5行（有很多空白空間）。我希望文本區域擴展到5行（取決於文本的數量），然後顯示滾動條（如果還有更多）。 – kayasa

你可以用一點CSS實現這一點，並使用max-height屬性：

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

由於沒有設置默認的高度，文本區域將成爲任何內容足夠高不到你的max-height，當它擊中它，它會開始滾動。

此外，請從textarea中刪除rows屬性。

2017-07-26 09:08:31 Stuart

謝謝。即使只顯示一個單詞，文本區域仍然顯示多行（似乎行具有一些默認值）。此外，當文本增加時，它不會將文本區域擴展爲最大高度，而是將滾動條放在默認大小的文本區域中。 – kayasa

將'rows'屬性帶走 - textarea將默認爲一行:) – Stuart

回答