如何从HTML中删除“不可见空格”
如何从HTML中删除“不可见空格”
我有一个我html代码的JSFiddle演示。这是代码：
Hello Wo rld
我遇到的问题是在Hello World!的'o'和'r'之间插入了一个额外的空格。display样式设置为none，所以请问有人可以告诉我如何去掉这个空格，得到Hello World!这个短语吗？
如何从HTML中删除"Invisible space"问题
这个问题是由换行符导致的。你有两个选择：
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>
还有第三种选择，可以查看我的回答。看看Tyler在你的回答中的观点。对我来说，把标签放在一行上比调整CSS样式更容易。实际上，我正在使用绝对字体大小，所以正如Tyler指出的，Oriol的解决方案可能不是最好的解决方案。对我来说，删除换行符并把内容放在一行上是最好的选择。
问题的原因是HTML中的换行符导致了“Invisible space”。解决方法有以下几种：
1. 将所有内容放在一行中（删除所有换行符）。
2. 注释掉换行符，例如：
Hello World
3. 将容器的字体大小设置为0，然后重新为span设置字体大小。
4. 将标签断开，例如：
Hello World
5. 使用浮动元素，例如：`span { float: left }`。
还有两种解决方法：
1. 在标签内部断开行，参考HTML5规范中的第二个例子。
2. 个人不喜欢解决方法2和4，因为它们使得标记不够易读。
解决此问题的最简单方法是删除所有换行符。其他解决方法可能会使得代码不够易读，但也有人可能会认为它们有用。同时，阅读代码的人应该注意到注释中的警告。
