在網頁開發中，文本輸入框（ textarea ）的換行方式是一個常見問題。隨著不同設備和屏幕尺寸的普及，文本輸入框需要適應各種顯示場景，確保用戶獲得最佳的輸入體驗。

本文將著重介紹如何使用CSS 來控制 textarea 的換行方式，打造響應式文本輸入框。

設置基本樣式

我們需要為 textarea 設置一些基本樣式，包括寬度、高度和字體大小等。

textarea {width: 100%;height: auto;min-height: 50px;font-size: 16px;padding: 10px;border: 1px solid ccc;resize: vertical;
}

這些樣式將使文本輸入框在所有設備和屏幕尺寸上具有基本的外觀和功能。

調整換行方式

要調整 textarea 的換行方式，我們需要使用 CSS 的 white-space 和 overflow 屬性。

移動端

在移動端，我們希望文本在每行顯示有限的字符數，以避免水平滾動。為此，我們可以使用 white-space: nowrap 和 overflow-x: scroll 。

@Mediascreen and (max-width: 576px) {textarea {max-width: 320px;line-height: 20px;white-space: nowrap;overflow-x: scroll;}
}

這將使移動端的文本輸入框每行最多顯示 20 個字符，并在超過該限制時提供水平滾動條。

平板端

在平板端，我們可以略微增加每行的字符數，以更好地利用更大的屏幕空間。我們可以使用 max-width: 500px 和 line-height: 20px 來實現。

@media screen and (min-width: 577px) and (max-width: 991px) {textarea {max-width: 500px;line-height: 20px;white-space: nowrap;overflow-x:scroll;}
}

桌面端

在桌面端，我們可以進一步增加每行的字符數，以獲得更舒適的輸入體驗。我們可以使用 max-width: 600px 和 line-height: 20px 來實現。

@media screen and (min-width: 992px) {textarea {max-width: 600px;line-height: 20px;white-space: nowrap;overflow-x: scroll;}
}

實例

下面是一個使用上述樣式創建的響應式文本輸入框實例：

當您調整瀏覽器窗口大小時，文本輸入框的換行方式會自動適應，從而提供最佳的輸入體驗。

結語

通過使用 CSS 的 white-space 和 overflow 屬性，我們可以輕松創建響應式的文本輸入框，在不同的設備和屏幕尺寸上提供一致且用戶友好的輸入體驗。希望文章能幫助您提升網頁開發技能，打造更卓越的用戶界面。

---

---

相關標簽： 打造響應式文本輸入框、 玩轉、 適應不同設備和屏幕尺寸、 換行、 玩轉telegram、 textarea、

上一篇：進階指南使用JavaScript增強textarea換行功

下一篇：從基礎到精通，全面掌握textarea換行的藝術從