Html和Markdown中的空格,  ;     以及   ‌ ‍三种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-spacingword-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+=`
${style}">${v}:`; Array.from(v).forEach(c=>str+=v2+c); str+=v2+"中"+v2+"文"+v2+"圆"+v2+"圆"+v2+"圆"+v2+"hello"+v2+"world"+"
"
} let str2=`
style= ${style||"默认值"} ${str}
`
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的效果截图

Html和Markdown中的空格,  ; &ensp; &emsp; 以及 &thinsp; &zwnj; &zwj;三种Unicode空格_第1张图片

<fieldset><legend>style= 默认值</legend>
<div style="">nbsp:&nbsp;n&nbsp;b&nbsp;s&nbsp;p&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;hello&nbsp;world</div><div style="">ensp:&ensp;e&ensp;n&ensp;s&ensp;p&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;hello&ensp;world</div><div style="">emsp:&emsp;e&emsp;m&emsp;s&emsp;p&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;hello&emsp;world</div><div style="">thinsp:&thinsp;t&thinsp;h&thinsp;i&thinsp;n&thinsp;s&thinsp;p&thinsp;&thinsp;&thinsp;&thinsp;&thinsp;&thinsp;hello&thinsp;world</div><div style="">zwnj:&zwnj;z&zwnj;w&zwnj;n&zwnj;j&zwnj;&zwnj;&zwnj;&zwnj;&zwnj;&zwnj;hello&zwnj;world</div><div style="">zwj:&zwj;z&zwj;w&zwj;j&zwj;&zwj;&zwj;&zwj;&zwj;&zwj;hello&zwj;world</div>
</fieldset>
	
<fieldset><legend>style= font-size:16px</legend>
<div style="font-size:16px">nbsp:&nbsp;n&nbsp;b&nbsp;s&nbsp;p&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;hello&nbsp;world</div><div style="font-size:16px">ensp:&ensp;e&ensp;n&ensp;s&ensp;p&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;hello&ensp;world</div><div style="font-size:16px">emsp:&emsp;e&emsp;m&emsp;s&emsp;p&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;hello&emsp;world</div><div style="font-size:16px">thinsp:&thinsp;t&thinsp;h&thinsp;i&thinsp;n&thinsp;s&thinsp;p&thinsp;&thinsp;&thinsp;&thinsp;&thinsp;&thinsp;hello&thinsp;world</div><div style="font-size:16px">zwnj:&zwnj;z&zwnj;w&zwnj;n&zwnj;j&zwnj;&zwnj;&zwnj;&zwnj;&zwnj;&zwnj;hello&zwnj;world</div><div style="font-size:16px">zwj:&zwj;z&zwj;w&zwj;j&zwj;&zwj;&zwj;&zwj;&zwj;&zwj;hello&zwj;world</div>
</fieldset>
	
<fieldset><legend>style= font-size:16px; word-spacing:100px;</legend>
<div style="font-size:16px; word-spacing:100px;">nbsp:&nbsp;n&nbsp;b&nbsp;s&nbsp;p&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;hello&nbsp;world</div><div style="font-size:16px; word-spacing:100px;">ensp:&ensp;e&ensp;n&ensp;s&ensp;p&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;hello&ensp;world</div><div style="font-size:16px; word-spacing:100px;">emsp:&emsp;e&emsp;m&emsp;s&emsp;p&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;hello&emsp;world</div><div style="font-size:16px; word-spacing:100px;">thinsp:&thinsp;t&thinsp;h&thinsp;i&thinsp;n&thinsp;s&thinsp;p&thinsp;&thinsp;&thinsp;&thinsp;&thinsp;&thinsp;hello&thinsp;world</div><div style="font-size:16px; word-spacing:100px;">zwnj:&zwnj;z&zwnj;w&zwnj;n&zwnj;j&zwnj;&zwnj;&zwnj;&zwnj;&zwnj;&zwnj;hello&zwnj;world</div><div style="font-size:16px; word-spacing:100px;">zwj:&zwj;z&zwj;w&zwj;j&zwj;&zwj;&zwj;&zwj;&zwj;&zwj;hello&zwj;world</div>
</fieldset>
	
<fieldset><legend>style= font-size:32px</legend>
<div style="font-size:32px">nbsp:&nbsp;n&nbsp;b&nbsp;s&nbsp;p&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;hello&nbsp;world</div><div style="font-size:32px">ensp:&ensp;e&ensp;n&ensp;s&ensp;p&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;hello&ensp;world</div><div style="font-size:32px">emsp:&emsp;e&emsp;m&emsp;s&emsp;p&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;hello&emsp;world</div><div style="font-size:32px">thinsp:&thinsp;t&thinsp;h&thinsp;i&thinsp;n&thinsp;s&thinsp;p&thinsp;&thinsp;&thinsp;&thinsp;&thinsp;&thinsp;hello&thinsp;world</div><div style="font-size:32px">zwnj:&zwnj;z&zwnj;w&zwnj;n&zwnj;j&zwnj;&zwnj;&zwnj;&zwnj;&zwnj;&zwnj;hello&zwnj;world</div><div style="font-size:32px">zwj:&zwj;z&zwj;w&zwj;j&zwj;&zwj;&zwj;&zwj;&zwj;&zwj;hello&zwj;world</div>
</fieldset>
	
<fieldset><legend>style= font-size:32px; word-spacing:100px;</legend>
<div style="font-size:32px; word-spacing:100px;">nbsp:&nbsp;n&nbsp;b&nbsp;s&nbsp;p&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;hello&nbsp;world</div><div style="font-size:32px; word-spacing:100px;">ensp:&ensp;e&ensp;n&ensp;s&ensp;p&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;hello&ensp;world</div><div style="font-size:32px; word-spacing:100px;">emsp:&emsp;e&emsp;m&emsp;s&emsp;p&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;hello&emsp;world</div><div style="font-size:32px; word-spacing:100px;">thinsp:&thinsp;t&thinsp;h&thinsp;i&thinsp;n&thinsp;s&thinsp;p&thinsp;&thinsp;&thinsp;&thinsp;&thinsp;&thinsp;hello&thinsp;world</div><div style="font-size:32px; word-spacing:100px;">zwnj:&zwnj;z&zwnj;w&zwnj;n&zwnj;j&zwnj;&zwnj;&zwnj;&zwnj;&zwnj;&zwnj;hello&zwnj;world</div><div style="font-size:32px; word-spacing:100px;">zwj:&zwj;z&zwj;w&zwj;j&zwj;&zwj;&zwj;&zwj;&zwj;&zwj;hello&zwj;world</div>
</fieldset>

你可能感兴趣的:(HTML,CSS,JS,学习笔记,解决问题,过程记录,html)