如何删除“不可见空间”从HTML [英] How to remove "Invisible space" from HTML

问题描述

可能重复：

内联块列表项之间的空格

我有一个 JSFiddle演示我的html代码。这里是代码：

I have a JSFiddle demo of my html code. Here is the code here:

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

我所遇到的问题是在Hello World！中的'o'和'r'之间插入了额外的空间。 display style设置为none，所以有人可以告诉我如何获得 Hello World！空格？

The problem I'm having is that an extra space is being inserted between the 'o' and the 'r' in Hello World!. The display style is set to none, so can someone please tell me how I can get the Hello World! phrase without the space?

推荐答案

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

The linebreaks are causing it - http://jsfiddle.net/RhvjF/1/

找不到特定的讯息，但聪明的人建议了3种固定方式it：

Can't find the particular post, but smart people suggested 3 ways of fixing it:

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



2. 像

1. Put everything in one line (remove all line breaks)

2. Comment out the line breaks, like

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

设置容器 font-size 到 0 并重新设置 span -s

Set the container font-size to 0 and re-set it for span-s

UPDATE

还有至少2种方法：

1. 打破标签，如

1. Break the tags, like

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

浮动元素，即 span {float：left}

Float the elements, i.e. span { float: left }

这篇关于如何删除“不可见空间”从HTML的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！