如何从HTML中删除“不可见空间”

Question

  

可能重复：
  A Space between Inline-Block List Items

我有一个JSFiddle demo的html代码。这是代码：

<span style="display: inline">Hello Wo</span>
<span style="display: none;"></span>
<span style="display: inline">rld</span>​

我遇到的问题是在Hello World中'o'和'r'之间插入了一个额外的空间！ display样式设置为无，所以有人可以告诉我如何在没有空格的情况下获得Hello World!短语吗？

Answer 1

换行符导致了它 - http://jsfiddle.net/RhvjF/1/

无法找到特定帖子，但聪明人提出了3种修复方法：

1. 将所有内容放在一行（删除所有换行符）

2. 注释掉换行符，例如

   <span style="display: inline">Hello Wo</span><!--
   --><span style="display: none;"></span><!--
   --><span style="display: inline">rld</span>
   

3. 将容器font-size设置为0，然后将其重新设置为span - s

<强>更新

至少有两种方式：

1. 打破标签，例如

   <span style="display: inline">Hello Wo</span
   ><span style="display: none;"></span
   ><span style="display: inline">rld</span>
   

2. 浮动元素，即span { float: left }

Answer 2

这是由换行引起的。你有两个选择：

1. 删除换行符
2. 浮动您的内容。

选项1

<span style="display: inline">Hello Wo</span><span style="display: none;"></span><span style="display:inline">rld</span>​

选项2

<style>
    #spanContainer > span { float:left; }​
</style>

<div id="spanContainer">
    <span style="display: inline">Hello Wo</span>
    <span style="display: none;"></span>
    <span style="display: inline">rld</span>​
</div>

Answer 3

请参阅http://jsfiddle.net/RhvjF/2/

HTML：

<div id="wrapper">
    <span style="display: inline">Hello Wo</span>
    <span style="display: none;"></span>
    <span style="display: inline">rld</span>
</div>

CSS：

#wrapper{
    font-size:0;
}
#wrapper>*{
    font-size:16px; /* Or whatever you want */
}