niubility-coding-js
niubility-coding-js copied to clipboard
Published
20 hours ago •
LinDaiDai
LinDaiDai
☁️第4期第5题：如何让`<p>测试 空格</p>`这两个词之间的空格变大？
如何让<p>测试 空格</p>这两个词之间的空格变大？
(题目来源：https://github.com/haizlin/fe-interview/issues/2440)
这道题的意思是说，原本有一段HTML代码如下：
<p>测试 空格</p>
在"测试"和"空格"两个词之间有一个空格，然后如何将这个空格变大。
这边有这么两种方法：
- 通过给
p标签设置word-spacing，将这个属性设置成自己想要的值。 - 将这个空格用一个
span标签包裹起来，然后设置span标签的letter-spacing或者word-spacing。
我分别用letter-spacing和word-spacing来处理了p和span标签：
<style>
.p-letter-spacing {
letter-spacing: 10px;
}
.p-word-spacing {
word-spacing: 10px;
}
.span-letter-spacing {
letter-spacing: 10px;
}
.span-word-spacing {
word-spacing: 10px;
}
</style>
<body>
<p>测试 空格</p>
<p class="p-letter-spacing">测试 空格</p>
<p class="p-word-spacing">测试 空格</p>
<p>测试<span class="span-letter-spacing"> </span>空格</p>
<p>测试<span class="span-word-spacing"> </span>空格</p>
</body>
让我们一起来看看效果：
大家可以看到效果，我用letter-spacing和word-spacing处理p标签，是会呈现不同的效果的，letter-spacing把中文之间的间隙也放大了，而word-spacing则不放大中文之间的间隙。
而span标签中只有一个空格，所以letter-spacing和word-spacing效果一样。
因此我们可以得出letter-spacing和word-spacing的结论：
letter-spacing和word-spacing这两个属性都用来添加他们对应的元素中的空白。letter-spacing添加字母之间的空白，而word-spacing添加每个单词之间的空白。word-spacing对中文也是有效的，只不过它以空格作为区分。
最后一句，是
letter-spacing对中文无效吧
感谢指出，我这里是写错了，word-spacing 对中文也是有效的，只不过它以空格作为区分。
例如 "第一句 第二句" 中，"第一句"被认为是一个单词，"第二句"被认为是一个单词，然后 word-spacing 会改变它们直接的间隙。