這篇文章給大家分享的是有關(guān)css和html的textarea文字如何換行顯示的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過來看看吧。

我想在textarea中輸入的文字，顯示在網(wǎng)頁中時(shí)，按照輸入的時(shí)候的格式顯示。

textarea輸入問題

輸入框中顯示是這樣的：兩行文字有換行

clipboard.png

1、html如果這樣寫：

顯示結(jié)果如截圖所示：兩行文字不會(huì)換行

clipboard.png

2、html中加一個(gè)white-space:pre;

.pre-text{

white-space:pre;

}

html代碼如下：

結(jié)果如下面截圖：兩行文字會(huì)換行，但會(huì)超出外面的div

.pre-text{

white-space:pre-wrap;

word-wrap:break-word;

word-break:break-all;

}

在后臺(tái)用textarea保存的文字內(nèi)容，內(nèi)容中有換行，但在頁面顯示的時(shí)候，一般不會(huì)再顯示出換行，

textarea解決方法

原因是textarea保存的換行符（\r\n）html不識別

方法一、用樣式解決：

方法二、用腳本或后臺(tái)程序處理下，換行符，直接把換行符替換成br標(biāo)簽

functionfixText(text){varreplaceRegex=/(\n\r|\r\n|\r|\n)/g;text=text||'';returntext.replace(replaceRegex,"
");}

感謝各位的閱讀！關(guān)于“css和html的textarea文字如何換行顯示”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識，如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！