下面給出的HTML，包裝文本= 「文本」 元件HTML/CSS
<input type="text"/>
被顯示在瀏覽器像這樣：
快速的棕色狐狸跳過了懶狗。
用下面的HTML，
<input type="text" value="The quick brown fox jumped over the lazy dog."/>
它顯示在瀏覽器中，像這樣：
這就是textarea的工作 - 用於多行文本輸入。 inputwon't do it;它並沒有設計成這樣做。所以請使用textarea。除了它們的視覺差異之外，還可以通過JavaScript以相同方式訪問它們（使用value屬性）。
您可以通過input事件並僅使用replace(/\n/g, '')來防止換行符被輸入。
字符會模仿一些意圖
input.break {
word-wrap: break-word;
word-break: break-all;
height: 80px;
}
這是一個真實的答案 – userlond 2015-11-26 05:45:14
任何人都知道這在所有瀏覽器中實現的效果如何？ – commonpike 2016-01-21 14:55:04
我剛剛在Firefox 43.0.4中測試過它，但它在Safari 9和Chrome 48中無法正常工作，它似乎可以正常工作：http://www.cssdesk.com/dbCSQ – 2016-02-02 04:05:42
您可以不它使用的輸入，你需要使用文本區域代替。 使用textarea的與wrap="soft"代碼和屬性的可選其餘部分是這樣的：
<textarea name="text" rows="14" cols="10" wrap="soft"> </textarea>
Atributes：要限制文本的數量在它例如爲「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;在風格方面的屬性： 爲了使textarea的不可調整大小，你可以使用風格resize:none;這樣的：
<textarea name="text" rows="14" cols="10" wrap="soft" maxlength="40" style="overflow:hidden; resize:none;></textarea>
這樣，你可以有或者例如一個有14行10列的文字區域，文字換行和最大字符長度爲「40」的字符，其工作方式與輸入文本框完全相同，但是使用行而不使用輸入文本。
注： textarea的與行的作品像不像是在所有不工作取得與行輸入<input type="text" name="tbox" size="10"></input>。
不，我不認爲它可以。但爲什麼textarea不是一個選項？ – 2011-03-13 00:46:45
使用textarea有時不是一個選項，因爲您不想允許輸入多行文本。只是包裝一行文本（注意：它們不是同一件事）。 – 2013-08-16 06:27:47