請輸入內(nèi)容：
    
    提交
    
顯示的內(nèi)容：
    

    
請輸入內(nèi)容：
    
    提交
    
顯示的內(nèi)容：
    
{{text2}}

    
請輸入內(nèi)容：
    
    提交
    
顯示的內(nèi)容：
    
{{text2}}

那么我試試直接給 pre 標簽設置 css 屬性text-index:2em;？這樣能夠?qū)崿F(xiàn)需求嗎？答案顯然是不行，因為這個屬性規(guī)定的是塊級元素首行文本的縮進，而這里從始至終都只有一個塊級元素 pre ，顯然是不能實現(xiàn)。而且我們還要考慮到用戶自己輸入的空格。

替換空格保留換行

既然直接顯示行不通，看來還是必須要處理文本，那我們就處理一下。首先嘗試，去掉所有的空格，首先想到的就是trim()方法。思路就是，以換行符為分割，獲取到每一段文本，然后用trim()方法去掉文本前后的空格，用

標簽把每段文字包裹起來，再把每一段用
換行標簽拼接起來。同時，不用pre標簽來顯示文本了，直接將處理過后的的 html 片段插入到 div 標簽里面，這里用到的是 vue 的 v-html 屬性。

    
請輸入內(nèi)容：
    
    提交
    
顯示的內(nèi)容：
    


// js部分
submitText(){
    let arr = [];
    this.text1.split('\n').forEach(item=>arr.push(`
${item.trim()}
`));
    this.text2 = arr.join('
');
}

如下圖所示，基本實現(xiàn)自動縮進和保留換行啦。

下面我們輸入一段詩歌，加上一些樣式，看看最終效果如何：

再輸入一段文章，輸入的時候打亂文章的縮進，可以看到不管我們?nèi)绾慰s進，顯示效果始終都是縮進兩個字符，那么就實現(xiàn)需求啦！

以上就是怎么在textarea中處理換行和空格，小編相信有部分知識點可能是我們?nèi)粘９ぷ鲿姷交蛴玫降?。希望你能通過這篇文章學到更多知識。更多詳情敬請關注創(chuàng)新互聯(lián)行業(yè)資訊頻道。