css和html的textarea文字如何換行顯示

發布時間：2021-09-26 11:07:32 來源：億速云閱讀：1570 作者：小新欄目：開發技術

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

　　我想在textarea中輸入的文字，顯示在網頁中時，按照輸入的時候的格式顯示。

　　textarea輸入問題

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

　　clipboard.png

　　1、html如果這樣寫：

　　<div>

　　<p>{{$article->content}}</p>

　　</div>

　　顯示結果如截圖所示：兩行文字不會換行

　　clipboard.png

　　2、html中加一個white-space:pre;

　　.pre-text{

　　white-space:pre;

　　}

　　html代碼如下：

　　<div>

　　<pclass="pre-text">{{$article->content}}</p>

　　</div>

　　結果如下面截圖：兩行文字會換行，但會超出外面的div

　　.pre-text{

　　white-space:pre-wrap;

　　word-wrap:break-word;

　　word-break:break-all;

　　}

　　在后臺用textarea保存的文字內容，內容中有換行，但在頁面顯示的時候，一般不會再顯示出換行，

　　textarea解決方法

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

　　方法一、用樣式解決：

　　<style>.pre-text{white-space:pre-wrap;}</style>

　　方法二、用腳本或后臺程序處理下，換行符，直接把換行符替換成br標簽

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

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

向AI問一下細節

亚洲激情专区-91九色丨porny丨老师-久久久久久久女国产乱让韩-国产精品午夜小视频观看