vue中保留字符串中的空格解决方案

时间:2025-03-26 20:35:04

vue中保留字符串中的空格解决方案

解决方案:

样式处理 white-space:pre-wrap

<template>
    <!-- 使用CSS样式保留空格 -->
    <p :style="{ whiteSpace: 'pre-wrap' }">{{ content }}</p>
</template>

content就是你要渲染的带有空格的字符串

2.将空格转换为实体 ‘’ -> ‘&nbsp;’

<template>
    <!-- 使用HTML实体保留空格 -->
    <p>{{ (/\s/g, '&nbsp;') }}</p>
</template>

在vue中输入空格&在html中输入空格



<!--在vue中输入空格-->
vue输入多个空格解决方法(uni-app也一样)
'nbsp'	'\u00a0'	不断行的空白格,该空格占据的宽度受字体影响(一个字符宽度)。
'ensp'	'\u2002'	相当全角状态键入半个“空格”键(半个汉字的宽度,一个字符宽度)。
'emsp'	'\u2003'	相当全角状态键入“空格”键(1个汉字的宽度,两个字符宽度)。
例:
1
<text class="txt">备<text v-html="'\u2003\u2003'"></text>注</text>


<!--在html中输入空格-->
例:
1
<div class="txt">备&emsp;注</text>