探讨一： word-spacing & letter-spacing的区别

探讨二： word-spacing & white-space 的区别

探讨一： word-spacing & letter-spacing的区别（对英文）

从单词字面意思大概就可以看出来，一个是对单词的空间调整，另一个是字母

所以这个栗子，我把一长串字母，空格分隔开。模拟是四个单词，用word-spacing起做用了

这个栗子是一长串单词没有间隙，默认为是一个单词，所以word-s不起作用，但是letter-spacing调整了每个字母之间的距离

To sum up:
(1) word-spacing 就是对整个单词进行间隔的控制

(2) letter-spacing是对每个字母之间的间距起作用

探讨一（2）： word-spacing & letter-spacing的区别（对中文）

接下来是对于中文来说，第一行，我把中文用空格分割成三组，同样的，word-spacing起作用了

而第三行，由于没有间隙，默认为这是一个“词组”所以word-s根本不起作用

第二行的还是letter-spacing，它不管你有没有间距，只管你每个字母（文字）之间的距离

To sum up:
对中文来说，跟英文情况类似，分开来讲是为了更好的分辨
（1）第一行和第三行，都使用了 word-spacing，但是为什么第三行不起作用？区别在html里面，第三行默认这是一个单词，而第一行我断句了

    <p>我今天想给大  海你会接受对方   汉拿山读法姬娜</p><p>我今天想给大海你会接受对方汉拿山读法姬娜</p>

（2）letter-spacing还是我行我素，不管是对于中文还是英文，都可以随意对每个字之间间距动手脚

探讨二： word-spacing & white-space的区别

**先总结一句：**这两个看上去都有一个space，有点相似，但是用途差的远了。首先明确word-spacing是控制单词与单词之间的距离，可以用px rem数据来作为值。（例如： word-spacing: 10px /20rem 都是OK的）。但是white-space是不能用数据的，前面的10px/20rem无效，而它有以下这几个值。

white-space——一个和空白格纠缠不清的男人

nowrap：不换行，除非遇到br> ， N个空格会被压缩为一个。
pre：保留所有空白。其行为方式类似 HTML 中的 pre>标签。
pre-wrap：保留所有空白，但是正常地进行换行（chrome，FF，IE8+，Opera），在IE6和IE7下等同于normal
normal：默认。空白会被浏览器忽略。
pre-line：合并空白符序列（合并成一个），但是保留换行符（chrome，FF，IE8+，Opera），在IE6和IE7下面等同于normal

我把这几个属性分成三类：
（1）nowrap——不还行
（2）pre 、pre-wrap 可以说非常相似的功能了，但是唯一的区别就是后者允许换行
（3）normal、pre-line 这两位大哥会把空格无视！非常可恶，记住这两个就行

下面是三行一模一样的html代码，我们加上white-space的属性看一下效果

    <p>我今天想给大         海你会接受对方             汉拿山读法姬娜</p><p>我今天想给大         海你会接受对方             汉拿山读法姬娜</p><p>我今天想给大         海你会接受对方             汉拿山读法姬娜</p>

To sum up:
（1）第一行直接无视了空格，这就是 normal / pre-line的特性，把空格吞了。

（2）第二行的pre，很友好的保留了空格，但是不支持换行

（3）第三行的pre-wrap，white-space家族良心，保留空格+支持换行

word-spacing letter-spacing white-space 分辨相关推荐

Visual Studio Tip 之如何查看隐形的空格(white space)和制表符(tab)
许多软件公司对于自己源代码的格式有这严格的规定, 比如说缩进的时候应该用多少个空格, 或多少个制表符都是不能有差错的. 然而, 三个空格和四个空格有很明显的区别么? 四个空格和一个制表符光靠肉眼容易分 ...
《Java SE实战指南》05-05：空白字符（White Space）
内容导航: 前言 1.定义 2.缩进 3.空格 4.空行 1.定义空白字符(White Space),包括ASCII空格符.水平制表符.换页符和行终止符,主要用来格式化代码. 2.缩进 4个空格,还 ...
stm32中c语言换行符error——expect a declaration warning——“\“followed by white space is not a line splic
标题 stm32中c语言换行符error--expect a declaration warning--""followed by white space is not a lin ...
线上问题处理-feign调用报错（Illegal character ((CTRL-CHAR, code 31)): only regular white space (\r, \n, \t) ）
线上问题处理-feign调用报错业务场景:服务1通过Feign调用服务2,测试阶段一切正常,线上有数据丢失(为避免敏感本地简单复现了下).报错如下: 2021-12-04 13:47:47.774 ...
only regular white space (\r, \n, \t) is allowed between tokens
Caused by: com.fasterxml.jackson.core.JsonParseException: Illegal character ((CTRL-CHAR, code 31)): ...
ubuntu 输入空白How to cd to folder name with spaces blank names (white space)
it's must to use \ because it has space bar between file name like this $cd FONT\ 001 You just use a ...
html5 white space,CSS white-space 属性
CSS样式常用属性整理 web工程师是最近5年刚刚兴起的一门高薪职业,人们的专注度越来越高. 那么前端除了学习html标签之外还需要掌握什么知识点呢? 为大家整理了一个和HTML标签密不可分的知识要点 ...
((CTRL-CHAR,code 8)) : only regular white space is allowed between tokens
1.美图 2.背景这个是一个Avro或者json操作,将 schema: id(int) name(String) value : 1,lcc 类似这样的序列化成带schema的数据,但是本程序是还 ...
Illegal character ((CTRL-CHAR, code 31)): only regular white space (\r, \n, \t) is allowed betwee...
用声明式Feign调用服务进行操作时,如果参数过多,结构复杂,会报以下json错误去掉这些配置: # 配置请求GZIP压缩 feign.compression.request.enabled = t ...
White space in argument-
latex编译的时候出现了上述问题说的是空格的问题. 在引用的时候,中间不能加空格: \cite{2019Multimodal, gkoumas2021makes} 注意上面逗号的后面有个空格,所以 ...

word-spacing letter-spacing white-space 分辨

探讨一： word-spacing & letter-spacing的区别

探讨二： word-spacing & white-space 的区别