CSS 可以使文字區域垂直擴展以適應其內容嗎？

使用CSS 自動調整文字區域高度

在Web 開發中，您經常需要建立可以自動調整高度以適應的文字區域用戶輸入的內容。雖然 PHP 和 JavaScript 為此提供了解決方案，但有一個優雅的 CSS 解決方法可以實現相同的效果，而不需要複雜的程式碼。

您可以使用 CSS 將文字區域垂直擴展以適應其內容，類似於div 的「overflow:show」屬性？

答案是肯定的！透過巧妙地組合 CSS 屬性，您可以使文字區域根據滾動高度動態調整其高度。這是您需要執行的：

<textarea name="text" oninput=' this.style.height = "";this.style.height = this.scrollHeight "px"'></textarea>

這一行程式碼的如何運作如下：

• this.style.height = "";：這一行將文字區域的高度重置為其預設值，從而允許它
• this.style. height = this.scrollHeight "px"：此行動態地將文字區域的高度設定為等於其滾動高度（其可見內容的高度）加上一個小的填充考慮到潛在的內容溢出。

透過此 CSS 解決方案，您可以建立自動擴展和縮小以適合其內容的文字區域，從而提供使用者友好的編輯體驗，而無需額外編碼。

以上是CSS 可以使文字區域垂直擴展以適應其內容嗎？的詳細內容。更多資訊請關注PHP中文網其他相關文章！