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

方法一：使用<pre>标签

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

方法二：设置white-space样式（推荐）

<div class="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

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