在日常工作中，我們經常需要處理大量文本信息。為了讓這些文本信息更易于閱讀和理解，我們需要對它們進行適當的格式化。

尤其是當我們輸入大量文本時，如果文本輸入框中沒有換行功能，將會導致文本堆疊在一起，難以閱讀。為了解決這個問題，本文將介紹一種方法，使用 CSS 實現優雅的文本換行顯示。

實現步驟

1. 創建一個文本輸入框

```

2. 創建一個文本輸出框

```

3. 添加 CSS 樣式

```csstext-input {width: 500px;Height: 500px;font-family: Arial, sans-serif;font-size: 14px;line-height: 1.5em;resize: none;overflow: hidden;}text-output {width: 500px;height: 500px;font-family: Arial, sans-serif;font-size: 14px;line-height: 1.5em;border: 1px solid black;overflow-wrap: break-word;white-space: pre-wrap;}```

4. 添加格式化按鈕

格式化 ```

5. 添加 javaScript 處理函數

```javascriptconst textInput = document.getElementById('text-input');const textOutput = document.getElementById('text-output');const formatButton = document.getElementById('format-button');formatButton.addEventListener('click', () => {const formattedText = textInput.value.replace(/\n/g, '
');textOutput.innerHTML = formattedText;});```

效果預覽

在文本輸入框中輸入大量文本，然后點擊格式化按鈕，文本將被自動換行并顯示在文本輸出框中。

輸入文本： 格式化后的文本：

結語

通過使用 CSS 中的 `overflow-wrap` 和 `white-space` 屬性，我們可以輕松實現大型文本輸入框的優雅換行顯示。這不僅提高了文本的可讀性，同時也增強了用戶體驗。

---

---

相關標簽： 格式化大型文件怎么弄、 實現優雅的換行顯示、 格式化大型文本輸入框、

上一篇：深入探討textarea元素，掌握其換行奧秘深入探

下一篇：利用KubernetesOperator進行大規模WebLogic