论 HTML 中使用空格的多种方式
学习空格的使用.
以前只知道 , 现在发现还有别的空格形式, 而别的空格形式我查我这边儿的 HTML 实体表没查着, 所以在这里学习一下.
主要是知道有这么些东西即可, 能够认识它们. 至于我自己平时创造产值的时候当然还是用 .
前面的讲解还是按照我加的 wiki 的介绍来. 其他为辅. 因为我发现有的原作者写的内容跟 wiki 介绍还是有出入的.
这就是我和 xS叉N 还有 j书上的人的区别: 我 Command + C、Command + V 的时候都是带着批判审慎的态度, 都过了一遍脑子, 或是在自己电脑上亲自跑出结果了而不是无脑抄. 你自己都不知道好不好使就去无脑抄, 那可不抄的都是些并没有什么卵用的么. 到时候再碰到问题用不了怪谁😂
以下内容出自: HTML中& nbsp; & ensp; & emsp; & thinsp;等6种空白空格的区别 这位作者我这边儿看来应该是写得最早的. 就先当是他写的吧.
还参考了: chriscoyier/dabblet.css
再就可以读一读:
HTML中 、 、 等6种空格标记
HTML 提供了 5 种空格实体(space entity), 它们拥有不同的宽度, 非断行空格( )是常规空格的宽度, 可运行于所有主流浏览器. 其他几种空格( 、 、 、‌、‍)在不同浏览器中宽度各异.
wiki 介绍见: Non-breaking space
它叫不换行空格, 全称 Non-breaking space (原文说的是 No-Break Space, 不专业), 它是最常见和我们使用最多的空格, 大多数的人可能只接触了 , 它是按下 space 键产生的空格. 在 HTML 中, 如果你用空格键产生此空格, 空格是不会累加的(只算 1 个). 要使用 HTML 实体表示才可累加, 该空格占据宽度受字体影响明显而强烈.
 
wiki 介绍见: En (typography)
它叫”半角空格”, 全称是 En space, en 是字体排印学的计量单位, 为 em 宽度的一半. 根据定义, 它等同于字体度的一半(如 16px 字体中就是 8px). 名义上是小写字母 n 的宽度. 此空格传承空格家族一贯的特性: 透明的, 此空格有个相当稳健的特性, 就是其占据的宽度正好是 1/2 个中文宽度, 而且基本上不受字体影响.
 
wiki 介绍见: Em (typography)
它叫“全角空格”, 全称是 Em Space, em 是字体排印学的计量单位, 相当于当前指定的点数. 例如, 1em 在 16px 的字体中就是 16px. 此空格也传承空格家族一贯的特性: 透明的, 此空格也有个相当稳健的特性, 就是其占据的宽度正好是 1 个中文宽度, 而且基本上不受字体影响.
 
wiki 介绍见: Thin space
它叫窄空格, 全称是 Thin Space. 我们不妨称之为”瘦弱空格”, 就是该空格长得比较瘦弱, 身体单薄, 占据的宽度比较小. 它是 em 之六分之一宽.
‌
wiki 介绍见: Zero-width non-joiner
它叫零宽不连字, 全称是 Zero Width Non Joiner, 简称 “ZWNJ”, 是一个不打印字符, 放在电子文本的两个字符之间, 抑制本来会发生的连字, 而是以这两个字符原本的字形来绘制. Unicode 中的零宽不连字字符映射为“”(zero width non-joiner, U+200C), HTML字符值引用为:‌
‍
wiki 介绍见: Zero-width joiner
它叫零宽连字, 全称是 Zero Width Joiner, 简称 “ZWJ”, 是一个不打印字符, 放在某些需要复杂排版语言(如阿拉伯语、印地语)的两个字符之间, 使得这两个本不会发生连字的字符产生了连字效果. 零宽连字符的 Unicode 码位是 U+200D(HTML:‍).
此外, 浏览器还会把以下字符当作空白进行解析: 空格( )、制表位(	)、换行(
)和回车(
)还有(　)等等.
代码示例
作者原来用的 jQuery 版本太老(jQ 1.7.1), 我给换成 jQ 3.4.1 了.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>使用空格的多种方式</title>
<style>
div {
margin: 0 0 10px 0;
border: 1px solid red;
width: 100px;
}
body {
background: black;
padding: 40px 20px;
color: white;
}
h2 {
font-size: 12px;
margin: 10px 0 0 0;
color: red;
}
</style>
</head>
<body>
<label>whitespace</label>
<select id="switch">
<option value="normal">normal</option>
<option value="nowrap">nowrap</option>
<option value="pre">pre</option>
<option value="pre-wrap">pre-wrap</option>
<option value="pre-line">pre-line</option>
</select>
<h2>Actual spaces</h2>
<div class="spaces">
A bunch of words you see.
</div>
<h2>Thin spaces &thinsp;</h2>
<div class="thin-spaces">
A bunch of words you see.
</div>
<h2>Non breaking spaces &nbsp;</h2>
<div class="non-breaking-spaces">
A bunch of words you see.
</div>
<h2>En spaces &ensp;</h2>
<div class="en-spaces">
A bunch of words you see.
</div>
<h2>Em spaces &emsp;</h2>
<div class="em-spaces">
A bunch of words you see.
</div>
<h2>Zero width joiner &zwj;</h2>
<div class="zero-width-joiner">
A‍bunch‍of‍words‍you‍see.
</div>
<h2>Zero width non joiner &zwnj;</h2>
<div class="zero-width-non-joiner">
A‌bunch‌of‌words‌you‌see.
</div>
<script src="https://libs.cdnjs.net/jquery/3.4.1/jquery.min.js"></script>
<script>
$("#switch").change(function() {
$("div").css({
"white-space": $("#switch option:selected").val()
})
})
</script>
</body>
</html>