Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

☁️第4期第5题：如何让<p>测试 空格</p>这两个词之间的空格变大？ #27

Open
LinDaiDai opened this issue Jun 17, 2020 · 3 comments
Open

☁️第4期第5题：如何让<p>测试 空格</p>这两个词之间的空格变大？ #27

LinDaiDai opened this issue Jun 17, 2020 · 3 comments
Labels
HTML

Comments

@LinDaiDai
Copy link
Owner

LinDaiDai commented Jun 17, 2020 •
edited
Loading

如何让<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对中文也是有效的，只不过它以空格作为区分。
@LinDaiDai LinDaiDai added the HTML label Jun 17, 2020
@xiaoniezi
Copy link

最后一句，是letter-spacing对中文无效吧

@LinDaiDai
Copy link
Owner Author

最后一句，是letter-spacing对中文无效吧

感谢指出，我这里是写错了，word-spacing 对中文也是有效的，只不过它以空格作为区分。
例如 "第一句 第二句" 中，"第一句"被认为是一个单词，"第二句"被认为是一个单词，然后 word-spacing 会改变它们直接的间隙。

@xiaoniezi
Copy link

最后一句，是letter-spacing对中文无效吧

感谢指出，我这里是写错了，word-spacing 对中文也是有效的，只不过它以空格作为区分。
例如 "第一句 第二句" 中，"第一句"被认为是一个单词，"第二句"被认为是一个单词，然后 word-spacing 会改变它们直接的间隙。

嗦嘎。有个公众号引用你的文章也写错了，地址

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
HTML
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@xiaoniezi @LinDaiDai