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

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

解决方案:

1.css样式处理 white-space：pre-wrap

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

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

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

<template>
    <!-- 使用HTML实体保留空格 -->
    <p>{{ content.replace(/\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>