在沒(méi)有使用編輯器而是使用了文本域<textarea>的情況下晋南，用戶所輸入的內(nèi)容呈現(xiàn)的效果并不理想役听，比如：原本的換行沒(méi)有保留吓歇，全部成了單行顯示雳窟。
要讓在<textarea>中輸入的內(nèi)容原格式輸出有一下兩種辦法：
方法一： 使用 <pre> 標(biāo)簽
使用<pre>標(biāo)簽是我最開(kāi)始采用的辦法砚嘴，但是這種方法也有一定的缺陷,比如說(shuō)我們?cè)谑褂玫木庉嬈鞯臅r(shí)候，換行涩拙、Tab、空格都會(huì)影響到輸出結(jié)果耸采。如圖：
并且兴泥，<pre>標(biāo)簽本身自帶得有一些樣式，比如字體等虾宇。如果你的頁(yè)面有引入bootstrap等css框架搓彻，那么受樣式影響就更多了，你得再寫(xiě)去覆蓋嘱朽。
因此旭贬，這種方法并不推薦。
方法二：使用css white-space
我們先來(lái)看一下white-space的定義和屬性：
white-space屬性指定元素內(nèi)的空白怎樣處理搪泳。
其屬性有：
normal —— 默認(rèn)稀轨，空白會(huì)被瀏覽器忽略
pre ——空白會(huì)被瀏覽器保留。其行為方式類(lèi)似HTML中的<pre>標(biāo)簽岸军。
nowrap —— 文本不會(huì)換行奋刽，文本會(huì)在同一行繼續(xù)，直到遇到<br />標(biāo)簽為止艰赞。
pre-warp —— 保留空白符序列佣谐，但正常進(jìn)行換行。
pre-line —— 合并空白符序列方妖，但保留換行符
inherit —— 規(guī)定應(yīng)該從父元素繼承 white-space 屬性的值
也就是說(shuō)狭魂，我們可以使用white-space:pre-warp或white-space:pre-line達(dá)到我們想要的效果。
兩者的區(qū)別是：
-
white-space:pre-warp輸入多少空格都會(huì)輸出的時(shí)候就帶幾個(gè)空格党觅。 -
white-space:pre-line無(wú)論輸入多少空格都會(huì)輸出的時(shí)候就帶幾個(gè)空格雌澄，會(huì)合并為一個(gè)。
如圖：
white-space:pre-warp效果如下：
white-space:pre-line效果如下：
因此仔役，更推薦使用第二種方法掷伙。
