Vue插值文本換行問題

問題背景：

后端返回的字符串帶有\n換行符，但Vue將其插值渲染成div內部文本后，文本並不換行，換行符顯示為一個空格。

 

目標：

讓文本在換行符處換行。

 

解決方法：

思路：實現文本換行有兩種方法，一是HTML方法，即<br>標簽；二是CSS方法，即white-space屬性。

方法1. 使用v-html

   首先，將字符串里的\n替換為<br>，然后用v-html指令渲染字符串為innerHTML。

// JS部分
this.text = res.data.replace(/\n/g, '<br>')

// HTML部分
<div v-html="text"></div>

  這種方法比較麻煩，而且存在安全問題，故不推薦使用。

 

方法2. 設置white-space屬性（推薦）

  將div容器的white-space屬性設置為pre-wrap即可解決問題。

// CSS部分
.text-wrapper {
  white-space: pre-wrap;
}

// HTML部分
<div class="text-wrapper">{{text}}</div>

pre-wrap值的意思是保留空白並且正常換行。

white-space各屬性值詳見這里。其實設置為pre即可使換行符發揮作用，但這時文本在div寬度不足時不會自動換行，而是撞破邊界延伸到div外部去，所以還得加上wrap。