Html和Markdown中的空格, nbsp； ensp； emsp； 以及 thinsp； zwnj； zwj；三种Unicode空格
HTML和Markdown可以用以下转义字符分隔字符
,   ,   ,   , ‌ ,‍
的宽度，可运行于所有主流浏览器。其他几种空格（   ,   ,   , ‌ ,‍）在不同浏览器中宽度各异。
受font-size影响, 受letter-spacing和word-spacing影响;
另外5个,受font-size影响, 不受letter-spacing和word-spacing影响;
不换行空格,默认四分之一em
全称No-Break Space，它是最常见和我们使用最多的空格，大多数的人可能只接触了 ，它是按下space键产生的空格。在HTML中，如果你用空格键产生此空格，空格是不会累加的（只算1个）。要使用html实体表示才可累加，该空格占据宽度受字体影响明显而强烈。
受css的word-spacing和letter-spacing控制, 其它不受;
等效Unicode的不间断空格: 十六进制写法 , 十进制写法
  半角空格,半个em
全称是En Space，en是字体排印学的计量单位，为em宽度的一半。根据定义，它等同于字体度的一半（如16px字体中就是8px）。名义上是小写字母n的宽度。
此空格传承空格家族一贯的特性：透明的，
此空格有个相当稳健的特性，就是其 占据的宽度正好是1/2个中文宽度，而且基本上不受字体影响。
受font-size影响, 不受letter-spacing和word-spacing影响;
  全角空格,一个em
全称是Em Space，em是字体排印学的计量单位，相当于当前指定的点数。例如，1 em在16px的字体中就是16px。
此空格也传承空格家族一贯的特性：透明的，
此空格也有个相当稳健的特性，就是其 占据的宽度正好是1个中文宽度，而且基本上不受字体影响。
受font-size影响, 不受letter-spacing和word-spacing影响;
  窄空格符,瘦弱空格符,六分之一em
全称是Thin Space。瘦弱空格，就是该空格长得比较瘦弱，身体单薄，占据的宽度比较小。它是em之六分之一宽。
受font-size影响, 不受letter-spacing和word-spacing影响;
‌零宽不连字符
全称是Zero Width Non Joiner，是一个不打印字符，放在电子文本的两个字符之间，抑制本来会发生的连字，而是以这两个字符原本的字形来绘制。Unicode中的零宽不连字字符映射为“”（zero width non-joiner，U+200C），HTML字符值引用为： ‌
受font-size影响, 不受letter-spacing和word-spacing影响;
‍ 零宽连字符
全称是Zero Width Joiner，是一个不打印字符，放在某些需要复杂排版语言（如阿拉伯语、印地语）的两个字符之间，使得这两个本不会发生连字的字符产生了连字效果。零宽连字符的Unicode码位是U+200D 。
受font-size影响, 不受letter-spacing和word-spacing影响;
三种 Unicode 空格
Html中写Unicode, 十进制用 &# 开头, 十六进制用 &#x 开头
等效 等效 : ----不间断空格
左 右效果
左 右效果
等效 : -------------------------半角空格
左 右效果
左 右效果
等效 ----------------------全角空格
左 右效果
左 右效果
不间断空格
半角空格
全角空格
测试
测试1
测试1的代码
<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"/><title></title></head><body><script>
const ar0="nbsp,ensp,emsp,thinsp,zwnj,zwj".replaceAll(" ","").split(',');
const spaceAr = ar0.map(v=>"&"+v+";");
let t , htm001="";function dw(style=""){let str="";for(let i=0;i<ar0.length;i++){let v=ar0[i] , v2=spaceAr[i];str+=`<div style="${style}">${v}:`;Array.from(v).forEach(c=>str+=v2+c);str+=v2+"中"+v2+"文"+v2+"圆"+v2+"圆"+v2+"圆"+v2+"hello"+v2+"world"+"</div>"}let str2=`
<fieldset><legend>style= ${style||"默认值"}</legend>
${str}
</fieldset>`console.log(str2);htm001+=str2;
}dw();
dw("font-size:16px");
dw("font-size:16px; word-spacing:100px;");
dw("font-size:32px");
dw("font-size:32px; word-spacing:100px;");document.write(htm001);let explain001Text = `
可以看出 受font-size影响, 受letter-spacing和word-spacing影响;      ‌&zwj 受font-size影响, 不受letter-spacing和word-spacing影响;`;let explain001Elem=t=document.createElement("explain001"); document.body.append(t);
t.style.cssText="font-size:20px; white-space:pre-wrap;"; t.innerText=explain001Text;</script><fieldset><legend>对应的html文本</legend><pre style="white-space:break-spaces;"><code></code><script>document.currentScript.previousElementSibling.textContent=htm001;</script></pre><style>legend{font-size:32px; font-weight:bold;}</style></body></html>测试1的效果截图
<fieldset><legend>style= 默认值</legend>
<div style="">nbsp: n b s p 中 文 圆 圆 圆 hello world</div><div style="">ensp: e n s p 中 文 圆 圆 圆 hello world</div><div style="">emsp: e m s p 中 文 圆 圆 圆 hello world</div><div style="">thinsp: t h i n s p 中 文 圆 圆 圆 hello world</div><div style="">zwnj:‌z‌w‌n‌j‌中‌文‌圆‌圆‌圆‌hello‌world</div><div style="">zwj:‍z‍w‍j‍中‍文‍圆‍圆‍圆‍hello‍world</div>
</fieldset><fieldset><legend>style= font-size:16px</legend>
<div style="font-size:16px">nbsp: n b s p 中 文 圆 圆 圆 hello world</div><div style="font-size:16px">ensp: e n s p 中 文 圆 圆 圆 hello world</div><div style="font-size:16px">emsp: e m s p 中 文 圆 圆 圆 hello world</div><div style="font-size:16px">thinsp: t h i n s p 中 文 圆 圆 圆 hello world</div><div style="font-size:16px">zwnj:‌z‌w‌n‌j‌中‌文‌圆‌圆‌圆‌hello‌world</div><div style="font-size:16px">zwj:‍z‍w‍j‍中‍文‍圆‍圆‍圆‍hello‍world</div>
</fieldset><fieldset><legend>style= font-size:16px; word-spacing:100px;</legend>
<div style="font-size:16px; word-spacing:100px;">nbsp: n b s p 中 文 圆 圆 圆 hello world</div><div style="font-size:16px; word-spacing:100px;">ensp: e n s p 中 文 圆 圆 圆 hello world</div><div style="font-size:16px; word-spacing:100px;">emsp: e m s p 中 文 圆 圆 圆 hello world</div><div style="font-size:16px; word-spacing:100px;">thinsp: t h i n s p 中 文 圆 圆 圆 hello world</div><div style="font-size:16px; word-spacing:100px;">zwnj:‌z‌w‌n‌j‌中‌文‌圆‌圆‌圆‌hello‌world</div><div style="font-size:16px; word-spacing:100px;">zwj:‍z‍w‍j‍中‍文‍圆‍圆‍圆‍hello‍world</div>
</fieldset><fieldset><legend>style= font-size:32px</legend>
<div style="font-size:32px">nbsp: n b s p 中 文 圆 圆 圆 hello world</div><div style="font-size:32px">ensp: e n s p 中 文 圆 圆 圆 hello world</div><div style="font-size:32px">emsp: e m s p 中 文 圆 圆 圆 hello world</div><div style="font-size:32px">thinsp: t h i n s p 中 文 圆 圆 圆 hello world</div><div style="font-size:32px">zwnj:‌z‌w‌n‌j‌中‌文‌圆‌圆‌圆‌hello‌world</div><div style="font-size:32px">zwj:‍z‍w‍j‍中‍文‍圆‍圆‍圆‍hello‍world</div>
</fieldset><fieldset><legend>style= font-size:32px; word-spacing:100px;</legend>
<div style="font-size:32px; word-spacing:100px;">nbsp: n b s p 中 文 圆 圆 圆 hello world</div><div style="font-size:32px; word-spacing:100px;">ensp: e n s p 中 文 圆 圆 圆 hello world</div><div style="font-size:32px; word-spacing:100px;">emsp: e m s p 中 文 圆 圆 圆 hello world</div><div style="font-size:32px; word-spacing:100px;">thinsp: t h i n s p 中 文 圆 圆 圆 hello world</div><div style="font-size:32px; word-spacing:100px;">zwnj:‌z‌w‌n‌j‌中‌文‌圆‌圆‌圆‌hello‌world</div><div style="font-size:32px; word-spacing:100px;">zwj:‍z‍w‍j‍中‍文‍圆‍圆‍圆‍hello‍world</div>
</fieldset>
Html和Markdown中的空格, nbsp； ensp； emsp； 以及 thinsp； zwnj； zwj；三种Unicode空格相关推荐
- nbsp; ensp; emsp; thinsp;zwnj;zwj; 6种空白空格的区别
HTML提供了5种空格实体(space entity),它们拥有不同的宽度,非断行空格( )是常规空格的宽度,可运行于所有主流浏览器.其他几种空格( )在不同浏览器中宽度各异. ...
- HTML中nbsp; ensp; emsp; thinsp; zwnj; zwj;等6种空白空格的区别
HTML提供了5种空格实体(space entity),它们拥有不同的宽度,非断行空格( )是常规空格的宽度,可运行于所有主流浏览器.其他几种空格( )在不同浏览器中宽度各异. 它 ...
- 私域运营中，企业私域流量挖掘用户价值的三种手段
企业私域流量是目前比较火爆的一种用户运营方式,这种方式的好处就在于只要企业用心进行私域运营,那么企业就可以有效的留存自己的目标用户群体,避免与同行产生过于激烈的竞争,然后再通过一系列的手段就可以将用户 ...
- WPF中实现PropertyGrid(用于展示对象的详细信息)的三种方式
WPF中实现PropertyGrid(用于展示对象的详细信息)的三种方式 原文:WPF中实现PropertyGrid(用于展示对象的详细信息)的三种方式 由于WPF中没有提供PropertyGrid控 ...
- 视频监控系统中的流媒体服务器,视频监控系统中的流媒体服务器、直写和全切换三种取流架构方案...
原标题:视频监控系统中的流媒体服务器.直写和全切换三种取流架构方案 一.流媒体服务器架构 前摄像头视频信号通过转发流媒体服务器转发至上壁面显示和终端接入,视频存储磁阵列通过流媒体存储服务器写入.实时流 ...
- HTML提供的5种空格实体(nbsp`;`ensp`; `emsp`;` thinsp`; `zwnj`;`zwj`;)
它叫"全角空格",全称是Em Space,em是字体排印学的计量单位,相当于当前指定的点数.例如,1 em在16px的字体中就是16px.此空格也传承空格家族一贯的特性:透明的 ...
- html空格的使用 emsp ensp nbsp; thinsp; zwnj; zwj;
  这是我们使用最多的空格,也就是按下space键产生的空格.在HTML中,如果你用空格键产生此空格,空格是不会累加的(只算1个).要使用html实体表示才可累加.为了便于记忆,我总是 ...
- HTML 6种空格nbsp;ensp;emsp;thinsp;zwnj;zwj;空白空格的区别
1. 它叫不换行空格,全称No-Break Space,它是最常见和我们使用最多的空格,大多数的人可能只接触了 ,它是按下space键产生的空格.在HTML中,如果你用空格键产生此空格,空格是不会累 ...
- android sdk与adt版本,eclipse中sdk与adt版本不兼容该怎么解决? 三种方法帮你搞定
安卓开发过程中经常遇到sdk版本adt版本不相符,sdk版本过高的问题,这篇经验帮助你解决这个问题,如果是adt版本过高,请升级sdk,如果出现的错误如下图所示表示sdk版本过高,下面介绍三种方法 软 ...
最新文章
- 中画图title函数_MATLAB-基础画图meshgrid
- c++数据结构中 顺序队列的队首队尾_数据结构 3.3 顺序队
- 《Effective Java 2nd》第4章 类和接口
- 如何在Windows系统上使用Object Detection API训练自己的数据？
- UAC执行批处理，进行提示
- 服装色差的识别成因与预防
- 跟我一起做面试题-linux线程编程(2)
- 软件观念革命－交互设计精髓
- java环境_Java 开发环境配置
- 秒赞机器人好友_qq空间秒赞机器人好友 qq空间说说秒赞神器
- java单例模式使用_Java单例模式的应用
- 如何有效预防宕机？你需要掌握这4个方法
- python报时功能_Python(PyS60)做的简单语音整点报时的实现
- 如何去掉广告实现百度精准搜索
- JPA中Specification方法
- 响应式极简新闻发布系统模板 v4.88
- Java获取当前年月日
- 机器学习 第三节 第八课
- 中国半导体芯片产业布局图(2022版)-爱普搜汽车
- 【牛腩】-'T_news_selectByCaId' 需要参数 '@caid'，但未提供该参数。”