什么是零宽度空格

本文主要讲述了:

  1. 什么是零宽度空格
  2. HTML中的零宽度空格
  3. JavaScript中的零宽度空格

正文

什么是零宽度空格

零宽度字符是1个Unicode字符,Unicode编码是U+200B,UTF-8编码是E2 80 8B

零宽度字符是不可见的非打印字符,它用于打断长英文单词或长阿拉伯数字,以便于换行显示,否则长英文单词和长阿拉伯数字会越过盒模型的边界。

HTML中的零宽度空格

在HTML中,以字符实体的形式使用零宽度空格。

示例:在HTML中使用零宽度空格。

1
2
3
4
5
6
7
8
9
10
11
12

<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<div>abc&#8203;def</div>
</body>
</html>

在HTML中,零宽度空格与<wbr>等效。

示例:

1
2
3
4
5
6
7
8
9
10
11
12

<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<div>abc<wbr />def</div>
</body>
</html>

JavaScript中的零宽度空格

在JavaScript中,零宽度空格占据1字符串长度。

示例:在JavaScript中,以UTF-16编码的形式使用零宽度空格。

1
2
3
4
const foo = "abcu200bdef";
const bar = "abcu{200b}def";
console.log(foo.length);
console.log(bar.length);

参考资料