☁️第4期第5题:如何让`<p>测试 空格</p>`这两个词之间的空格变大?
Opened this issue · 3 comments
LinDaiDai commented
如何让<p>测试 空格</p>
这两个词之间的空格变大?
(题目来源:haizlin/fe-interview#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
对中文也是有效的,只不过它以空格作为区分。
xiaoniezi commented
最后一句,是letter-spacing
对中文无效吧
LinDaiDai commented
最后一句,是
letter-spacing
对中文无效吧
感谢指出,我这里是写错了,word-spacing
对中文也是有效的,只不过它以空格作为区分。
例如 "第一句 第二句" 中,"第一句"被认为是一个单词,"第二句"被认为是一个单词,然后 word-spacing
会改变它们直接的间隙。