数据库的换行符到前端不展示了

是这样的原本数据库中的数据都是带有\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 可以确保文本既保持原有的格式，又能在容器边界处适当换行。