[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，下面列出了常见的几个值以及它们的作用：
-
normal (默认值)
- 浏览器会合并多个空白字符为单个空格，并且换行符会被忽略。
- 文本会根据容器的宽度自动换行。
-
pre
- 保留所有的空白字符，包括空格和换行符。
- 换行符会被显示为新的行。
- 不会自动换行，文本会按照原始的格式显示，即使它超过了容器的宽度。
-
nowrap
- 合并空白字符为单个空格。
- 文本不会自动换行，而是尽可能地保持在一行内，超出部分会溢出容器。
-
pre-wrap
- 保留空白字符，包括空格和换行符。
- 换行符会被显示为新的行。
- 如果文本超过了容器的宽度，文本会自动换行，保持文本在容器内不溢出。
-
pre-line
- 合并空白字符为单个空格。
- 换行符会被显示为新的行。
- 自动换行，类似于
normal，但是会保留换行符作为新的行。
-
break-spaces
- 允许空格字符在一行结束时被断开。
- 这意味着长的空格序列可以在行尾断开，以适应容器宽度，避免溢出。
方法三：使用v-html（不推荐，可能被执行恶意脚本）
将文本中的换行与空格替换成HTML样式，然后使用v-html直接渲染HTML
<div
v-html="card_data.content.replace(/\n/g, '<br>').replace(/ /g, ' ')"
>
原文地址：https://blog.csdn.net/qq_45831414/article/details/140371285
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！