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, ' ') }}</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">备 注</text>