當el-input輸入多行內容，反顯時，字符串需要換行顯示

　　el-input 設置type為textarea屬性后，可以輸入多行內容。如圖：

　

 

 

 

　　現在有個需求，使用文本標簽（示例用的div），回顯該內容，然后就出現內容不換行的問題。如下圖所示：
　　

       

 

 　　沒有換行。

　　1. 先想了個解決辦法，反顯也用el-input即可。但是存在問題：當前頁面通過html2canvas和pdfjs導出生成PDF文件時，內容不會換行顯示。

　　2. 然后查看接口返回的文本內容，發現字符串中存在回車符（↵ 或者 \n），想到可以將其轉換成回車符（<br/>），也可以解決該問題（注意前提是用v-html綁定內容，不過不推薦這種方案，容易產生安全問題，xss攻擊）。

　　

　　 str.replace(/↵/g,"<br/>") 

 　　3. 最后，采取的是設置對應標簽 css 樣式方案，解決了該問題。

 　　 white-space: pre-wrap; 2 word-break: break-all; 

　　效果圖：

       

　　4.補充下，el-table中的tips提示信息也需要換行時，可以用el-popover來實現字符串換行效果，注意利用分發取代content屬性。效果圖
　　　

 

　　代碼如下：

<template slot-scope="scope">
  <el-popover
    width="200"
    placement="top"
    trigger="hover">
    <div style="white-space: pre-wrap;word-break: break-all;">{{scope.row.propName}}</div>
    <div slot="reference">{{scope.row.propName}}</div>
  </el-popover>
</template>