letterSpacing和wordSpacing都是CSS属性，用于控制文本的间距。这两个属性之间的主要区别在于它们影响的文本范围不同。
letterSpacing: 这个属性用于控制字符之间的间距。也就是说，它会改变每个字符之间的空间。例如，如果你把letterSpacing设置为2，那么每个字符都会比原来的位置向右移动两个单位。wordSpacing: 这个属性用于控制单词之间的间距。也就是说，它会改变单词之间的空间，但是不会改变单词内部的字符间距。例如，如果你把wordSpacing设置为2，那么两个单词之间的空间会比原来的位置向右移动两个单位。
下面是一个HTML和JavaScript的示例，演示了如何使用这两个属性：
示例效果与源代码：
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
| <!DOCTYPE html>
<html>
<head>
<style>
#myText {
font-size: 20px;
}
</style>
</head>
<body>
<p id="myText">Hello, World!</p>
<button onclick="increaseSpacing()">增加字符间距</button>
<button onclick="increaseWordSpacing()">增加单词间距</button>
<script>
function increaseSpacing() {
var text = document.getElementById("myText");
text.style.letterSpacing = (parseInt(text.style.letterSpacing || 0) + 1) + "px";
}
function increaseWordSpacing() {
var text = document.getElementById("myText");
text.style.wordSpacing = (parseInt(text.style.wordSpacing || 0) + 1) + "px";
}
</script>
</body>
</html>
|
尝试一下 »
在这个示例中，我们有一段文本和两个按钮。点击"增加字符间距"按钮会增加每个字符之间的间距，而点击"增加单词间距"按钮会增加单词之间的间距。注意，这两个属性默认值都是0，所以如果你想增加间距，你需要先给它们设置一个非零值。