在 input type="text" 元素 HTML/CSS 中包裝文本

Question

下圖的HTML，

<input type="text"/>

在瀏覽器中顯示如下：

---

當我添加以下文本時，

敏捷的棕色狐狸跳過了懶狗。

使用下面的 HTML，

 <input type="text" value="The quick brown fox jumped over the lazy dog."/>

它在瀏覽器中顯示如下：

---

但我希望它像這樣顯示在瀏覽器中：

---

我希望輸入元素中的文本換行。 這可以在沒有文本區域的情況下完成嗎？

Answer 1

那是textarea的工作 - 用於多行文本輸入。 input不會這樣做； 它不是為這樣做而設計的。

所以使用textarea 。 除了視覺上的差異之外，它們還可以通過 JavaScript 以相同的方式訪問（使用value屬性）。

您可以防止通過input事件input換行符，只需使用replace(/\\n/g, '') 。

Answer 2

Word Break 會模仿一些意圖

 input[type=text] { word-wrap: break-word; word-break: break-all; height: 80px; }

 <input type="text" value="The quick brown fox jumped over the lazy dog" />

作為一種變通方法，此解決方案在某些瀏覽器上失去了有效性。 請查看演示： http : //cssdesk.com/dbCSQ

Answer 3

您不能為它使用輸入，您需要使用 textarea 代替。 將 textarea 與wrap="soft"代碼和可選的其余屬性一起使用，如下所示：

<textarea name="text" rows="14" cols="10" wrap="soft"> </textarea>

屬性：要將其中的文本數量限制為例如“40”個字符，您可以像這樣添加屬性maxlength="40" ： <textarea name="text" rows="14" cols="10" wrap="soft" maxlength="40"></textarea>隱藏滾動樣式。 如果你只使用overflow:scroll; 或overflow:hidden; 或overflow:auto; 它只會對一個滾動條有效。 如果你想為每個滾動條設置不同的屬性，那么使用像這樣的屬性overflow:scroll; overflow-x:auto; overflow-y:hidden; overflow:scroll; overflow-x:auto; overflow-y:hidden; 在樣式區域中：要使 textarea 不可調整大小，您可以使用帶有resize:none;的樣式resize:none; 像這樣：

<textarea name="text" rows="14" cols="10" wrap="soft" maxlength="40" style="overflow:hidden; resize:none;></textarea>

這樣，您可以擁有或示例一個包含 14 行和 10 列的文本區域，帶有自動換行和“40”個字符的最大字符長度，其工作方式與輸入文本框完全相同，但使用行而不使用輸入文本。

注意： textarea 與行不同，就像 input <input type="text" name="tbox" size="10"></input> ，它根本不與行一起工作。

Answer 4

要創建一個文本輸入，其中引擎蓋下的值是單行字符串但以自動換行格式呈現給用戶，您可以在<div>或其他元素上使用contenteditable屬性：

 const el = document.querySelector('div[contenteditable]'); // Get value from element on input events el.addEventListener('input', () => console.log(el.textContent)); // Set some value el.textContent = 'Lorem ipsum curae magna venenatis mattis, purus luctus cubilia quisque in et, leo enim aliquam consequat.'

 div[contenteditable] { border: 1px solid black; width: 200px; }

 <div contenteditable></div>

Answer 5

我知道這是舊的，但沒有人提到這一點，所以我想我會添加一個想要這個的理由。

如果需要將數據存儲到隱藏的表單字段（如大字符串）中，則可以通過在完成測試時將“隱藏”更改為“文本”並返回“隱藏”來輕松顯示該字段以進行測試。 文本區域不能。 它是完全不同的 object。

話雖如此，文本區域可以將 css 顯示屬性設置為“無”以隱藏它並仍然允許訪問內容。