css word-spacing test 2208100255

最新推荐文章于 2024-02-17 03:44:31 发布

kfepiza

最新推荐文章于 2024-02-17 03:44:31 发布

阅读量99

点赞数

分类专栏： HTML CSS JS 学习笔记解决问题试验演示过程记录文章标签： css 前端

本文链接：https://blog.csdn.net/kfepiza/article/details/126258813

版权

HTML CSS JS 同时被 2 个专栏收录

84 篇文章 2 订阅

订阅专栏

学习笔记解决问题试验演示过程记录

64 篇文章 0 订阅

订阅专栏

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 2208100255</title>




</head><body>
	
	

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

		</section>
	</fieldset>

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

		</pre>
	</fieldset>


	<fieldset><legend>设置word-spacing</legend><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
通过指定具体的额外间距来增加字体的单词间距。查看 <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>