是這樣的原本數據庫中的數據都是帶有\n換行符的但是頁面卻一直不展示

解決辦法

    <el-drawer title="預覽" :visible.sync="drawer" :with-header="false"><div v-for="(item, index) in cardArray" :key="index"><span># {{index+1}} | {{item.wordNum}}字</span><el-card style="white-space: pre-wrap;" shadow="hover">{{ item.slice }}</el-card></div></el-drawer>

了解才知道:

white-space: pre-wrap;?是一個CSS樣式屬性，用于控制元素中的空白如何處理。這個屬性的具體含義如下：

• white-space：這是一個CSS屬性，用于確定如何處理元素中的空白符（如空格、制表符、換行符等）。

• pre-wrap：是這個屬性的值之一，它具有以下行為：

  • pre：保留空白符，相當于HTML中的<pre>標簽，空白符會被保留，包括空格、制表符和換行符。
  • wrap：允許在必要時進行單詞換行。

綜合起來，white-space: pre-wrap;?的作用是：

• 保留文本中的空白符，包括空格、制表符和換行符。
• 允許在文本需要換行時進行換行，而不是強制文本在一行內顯示。

這個樣式特別有用，當您想要在HTML中保留源代碼的格式或者在文本中保留換行和空格時，而又不希望文本在一行內超出容器寬度時。使用?pre-wrap?可以確保文本既保持原有的格式，又能在容器邊界處適當換行。