【笔记】CSS实现去除多个行内元素中间的空格

发表于 更新于 阅读次数：

前言

CSS实现去除多个行内元素中间的空格

通过删除源码中的换行符实现

1
2
3
<div>
  <span>文本内容</span><span>文本内容</span><span>文本内容</span>
</div>

通过将父级元素字号归零实现

  • 父级元素字号归零，子级重新设置字号
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<style>
  div {
    font-size: 0;
  }
  
  span {
    font-size: 16px;
  }
</style>

<div>
  <span>文本内容</span>
  <span>文本内容</span>
  <span>文本内容</span>
</div>

通过设置父级元素设置为flex实现

1
2
3
4
5
6
7
8
9
10
11
<style>
  div {
    display: flex;
  }
</style>

<div>
  <span>文本内容</span>
  <span>文本内容</span>
  <span>文本内容</span>
</div>

通过子元素向左浮动实现

1
2
3
4
5
6
7
8
9
10
11
<style>
  span {
    folat: left;
  }
</style>

<div>
  <span>文本内容</span>
  <span>文本内容</span>
  <span>文本内容</span>
</div>

完成