[Vue3 + TS + Vite] 将所展示文本内容的换行与空格显示出来

方法一：**使用

<pre>

标签**

<pre>{{ card_data.content }}</pre>

方法二：**设置

white-space

样式（推荐）**

<divclass="card-content-box">
    {{ card_data.content }}
</div>
.card-content-box{
    white-space: pre-wrap;
}

**

white-space: pre-wrap;

的用途在于它允许你保留源代码中的空白和换行，同时仍然允许文本自然换行，这在显示代码片段或需要保留文本格式的场景下非常有用。
例如，在论坛或文档中展示代码块时，通常会使用

pre-wrap

，这样代码中的空格和换行能够被正确显示，同时文本不会超出显示区域。**

CSS中的

white-space

属性用于控制元素内的空白字符（例如空格、制表符和换行符）如何处理。

white-space

属性有多个可能的值，包括

pre-wrap

，下面列出了常见的几个值以及它们的作用：

1. normal (默认值)- 浏览器会合并多个空白字符为单个空格，并且换行符会被忽略。- 文本会根据容器的宽度自动换行。
2. pre- 保留所有的空白字符，包括空格和换行符。- 换行符会被显示为新的行。- 不会自动换行，文本会按照原始的格式显示，即使它超过了容器的宽度。
3. nowrap- 合并空白字符为单个空格。- 文本不会自动换行，而是尽可能地保持在一行内，超出部分会溢出容器。
4. pre-wrap- 保留空白字符，包括空格和换行符。- 换行符会被显示为新的行。- 如果文本超过了容器的宽度，文本会自动换行，保持文本在容器内不溢出。
5. pre-line- 合并空白字符为单个空格。- 换行符会被显示为新的行。- 自动换行，类似于normal，但是会保留换行符作为新的行。
6. break-spaces- 允许空格字符在一行结束时被断开。- 这意味着长的空格序列可以在行尾断开，以适应容器宽度，避免溢出。

方法三：使用

v-html

（不推荐，可能被执行恶意脚本）

将文本中的换行与空格替换成HTML样式，然后使用v-html直接渲染HTML

<divv-html="card_data.content.replace(/\n/g, '<br>').replace(/ /g, '&nbsp;')">