css word-spacing test 2208100255

属性 word-spacing 用于声明标签和单词直接的间距行为。
初始值 normal
适用元素 all elements. It also applies to ::first-letter and ::first-line.
是否是继承属性 yes
Percentages refer to the width of the affected glyph

取值:
normal
正常的单词间距，由当前字体和/或浏览器定义。
length
通过指定具体的额外间距来增加字体的单词间距。查看了解可用单位。
percentage
通过指定受影响字符的宽度的百分比的方式来增加的间距。

测试代码

DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"/><title>css word-spacing test 2208100255title>




head><body>
	
	

	<fieldset><legend>section内的文字legend>
		<section class="WordSpacingTestContainer" >

		section>
	fieldset>

	<fieldset><legend>pre内的文字legend>
		<pre class="WordSpacingTestContainer" >

		pre>
	fieldset>


	<fieldset><legend>设置word-spacinglegend><section id="buttonsOfSetWordSpacing">section>fieldset>

	<script>


		let str=`

属性 word-spacing 用于声明标签和单词直接的间距行为。
初始值	normal
适用元素	all elements. It also applies to ::first-letter and ::first-line.
是否是继承属性	yes
Percentages	refer to the width of the affected glyph

取值:
normal
正常的单词间距，由当前字体和/或浏览器定义。
length
通过指定具体的额外间距来增加字体的单词间距。查看  了解可用单位。
percentage
通过指定受影响字符的宽度的百分比的方式来增加的间距。

		`;

		

		const WordSpacingTestContainerArray = [...document.querySelectorAll('.WordSpacingTestContainer')];

		for(let e of WordSpacingTestContainerArray)e.textContent=str;

		const Ops = ["normal"]; for(let n=0;n<1000;n+=10)Ops.push(n+"px");

		let buttonsOfSetWordSpacing = document.getElementById("buttonsOfSetWordSpacing");

		Ops.forEach(op=>{
			let btn = document.createElement("button"); btn.type="button";
			btn.innerHTML=op;
			btn.addEventListener("click", ev=>{
				for(let e of WordSpacingTestContainerArray){
					e.style.wordSpacing=op;
				}
			});
			buttonsOfSetWordSpacing.appendChild(btn);
		});


	script>


body>html>




1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75

在这里插入图片描述

相关阅读:
北京冬奥一项AI黑科技即将走进大众：实时动捕三维姿态，误差不到5毫米
【网络层】子网划分、无分类编址CIDR、构成超网、ARP协议
专业图标制作软件 Image2icon 最新中文 for mac
linux安装Git
Socket 入坑
c++入门99题61-70
arx实现三维实体贴材质图
ogrinfo不是内部或者外部命令
Unity之NetCode多人网络游戏联机对战教程(5)--ConnectionData与MemoryPack
Ubuntu系统下安装常用软件

原文地址：https://blog.csdn.net/kfepiza/article/details/126258813