Phenomenon
Recently, I encountered a strange phenomenon in the development of the Vue2 project. The user stored data with four spaces in the database. The database storage is normal, and the data returned by the interface also has four spaces, but the page display only has one space.
reason
In HTML/Vue, multiple consecutive spaces are combined into one space.
Solution
1. Interpolation expression + regular
<template>
<span>{{ space1 }}</span>
<span>{{ space2} }</span>
</template>
<script>
export default {
data() {
//Correct writing space1: 'This is a space'.replace(/\s/g, '\xa0'),//The page display effect: This is a space //Error writing space2: 'This is a space'.replace(/\s/g, '&nbsp;'),//The page display effect: This is a space }
}
</script>In Vue2, if you use interpolation expression, you need to use\xa0To represent spaces, if used directly To represent spaces, it will not be displayed as spaces, but will be parsed as a character entity.
-html directive + regular
<template>
<span v-html="space1">{{ space1 }}</span>
<span v-html="space2">{{ space2} }</span>
</template>
<script>
export default {
data() {
//Correct writing method 1 space1: 'This is a space'.replace(/\s/g, '\xa0'),//The page display effect: This is a space //Correct writing method 2 space2: 'This is a space'.replace(/\s/g, '&nbsp;'),//The page display effect: This is a space }
}
</script>In Vue2, ifv-htmlInstruction method, use\xa0or To indicate that spaces can be displayed normally.
-html instruction/interpolation expression + CSS
If no space escapes,v-htmlIn instruction/interpolation expression mode, you can directly add the following styles to the element and achieve the desired effect.
<template> <span style="white-space:pre;" v-html="'This is a space'"></span> </template>
in,white-space:pre;It is to keep all blanks or newline characters (Enter keys) and can achieve as-is output.
Extra
In Vue2, if you use as a space directly in the template label, it will be converted into a space during the compile process. If you use \xa0 directly to represent spaces, it will be parsed as a character entity.
<template> <!-- Page display effect：This is Spaces --> <span>This is&nbsp;&nbsp;&nbsp;Spaces'</span> <!-- Page display effect: This is \xa0\xa0\xa0 space --> <span>This is \xa0\xa0\xa0 space'</span> </template>
Several space entities provided by HTML
HTML provides several space entities that have different widths. Non-breaking spaces ( ) are the width of regular spaces and can be run in all mainstream browsers. Several other spaces (      ‌‍) The width varies in different browsers.
It is called No-Break Space, the full name is No-Break Space. It is the most common and most used space. Most people may only touch it. It is the space generated by pressing the space key. In HTML, if you use the space bar to generate this space, the space will not accumulate (only count 1). You must use html entity representation to accumulate, and the width occupied by this space is significantly affected by the font.
 
It is called half-width space, its full name is En Space, en is the unit of measurement for font printing, which is half the width of em. By definition, it is equivalent to half of the font level (such as 8px in 16px fonts). Nominally the width of the lowercase letter n. This space inherits the consistent characteristics of the space family: transparent, and this space has a very stable feature, that is, the width it occupies is exactly 1/2 of the Chinese width, and is basically not affected by the font.
 
It is called an angle space, its full name is Em Space, em is the unit of measurement for font printing, which is equivalent to the currently specified number of points. For example, 1 em is 16px in 16px fonts. This space also inherits the consistent characteristics of the space family: transparent, and this space also has a very stable feature, that is, the width it occupies is exactly 1 Chinese width, and is basically not affected by the font.
 
It is called narrow space, and its full name is Thin Space. We might as well call it a thin space, which means that the space is thin, has a thin body, and occupies a relatively small width. It is one sixth of a width of em.
‌
It is called Zero Width Non Joiner, or ZWNJ for short. It is a character that does not print and is placed between two characters in electronic text to suppress the hyphen that would have occurred, but is drawn in the original glyph of these two characters. Zero-width nonhyphen characters in Unicode are mapped to U+200C.
‍
It is called Zero Width Joiner, the full name is Zero Width Joiner, or ZWJ. It is a character that does not print and is placed between two characters in some complex typesetting languages (such as Arabic and Hindi), so that these two characters that do not hyphenate have a hyphenation effect. The Unicode code bit of the zero-width hyphen is U+200D.
In addition, the browser will parse the following characters as blanks: spaces ( ), tabulation (	), line break (
) and Enter (
)besides(　)etc.
Spaces in Js
1.(32)
2.\xa0: Extended character set characters belonging to latin (ISO/IEC_8859-1, Latin letter), representing the whitespace nbsp(non-breaking space).
3.\u0020: Unicode characters, usage and\xa0Same
4.\x20: Standard keyboard code value table - hexadecimal.
5.%20: DecodeURIComponent is required for decoding URI. For example, decodeURIComponent('%20') will display 1 space.
6.\t: This is equivalent to pressing the tab key, and one is equivalent to 4 spaces.
This is the article about how Vue merges multiple spaces into one space. This is all about this article. For more related content about Vue merges multiple spaces, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!