Perfect solution for preserving spaces in strings in vue

Keep spaces in strings in vue

Sometimes some requirements require youreserveThe string returned by the backendSpaces, when we use instructionsv-htmlWhen the string returned by the backend is directly rendered to the page, it willAutomatic clearanceLose spaces in strings

Solution

Style processing white-space: pre-wrap

&lt;template&gt;
	&lt;!-- useCSSKeep spaces in style --&gt;
    &lt;p :style="{ whiteSpace: 'pre-wrap' }"&gt;{{ content }}&lt;/p&gt;
&lt;/template&gt;

contentIt's the string with spaces you want to render

2. Convert spaces to entities ‘’ -> ‘ ’

&lt;template&gt;
    &lt;!-- useHTMLStay spaces --&gt;
    &lt;p&gt;{{ (/\s/g, '&amp;nbsp;') }}&lt;/p&gt;
&lt;/template&gt;

Enter space in vue & enter space in html

Enter space in vue

Vue input multiple spaces workaround (as is uni-app)

'nbsp'	'\u00a0'	A line of blank spaces, the width occupied by the space is affected by the font (one character width).
'ensp'	'\u2002'	Type half of the "space" key (half of the Chinese character width, one character width) in a full-width state.
'emsp'	'\u2003'	Type the "space" key in a full-width state (the width of 1 Chinese character, the width of two characters).

example:

&lt;text class="txt"&gt;Prepare&lt;text v-html="'\u2003\u2003'"&gt;&lt;/text&gt;Note&lt;/text&gt;

Enter spaces in html

example:

&lt;div class="txt"&gt;Prepare&amp;emsp;Note&lt;/text&gt;

This is the end of this article about retaining spaces in strings in vue. For more related contents of retaining strings in vue, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!