Is there a HTML character that, on all (major) browsers (plus IE8 sadly) displays nothing and doesn't add any extra space?
是否有一个HTML字符,在所有(主要)浏览器(加上IE8可悲)没有显示任何内容并且不添加任何额外空间?
So, an alternative to but which doesn't add whitespace to the page, and which won't ever show up as an ugly "unrecognised character" marker or ?.
所以,替代 但是它不会在页面上添加空格,并且不会显示为丑陋的“无法识别的字符”标记或?
Why: in my case, I'm trying to work around a problem on an old, proprietary CMS that is removing empty but necessary HTML elements that are required because other parts of the system will fill them dynamically.
为什么:在我的情况下,我正在尝试解决旧的专有CMS上的问题,该问题正在删除所需的空白但必需的HTML元素,因为系统的其他部分将动态填充它们。
Imagine something like (simplified trivial example) <span class="placeholder" data-type="username"></span> which is populated with a user's username if a user is logged in - but this old-school CMS sees it as being empty and removes it.
想象一下(简化的简单示例) ,如果用户已登录,则填充用户的用户名 - 但是这个老式的CMS将其视为是空的并删除它。
2 个解决方案
#1
20
There seem to be two options that mostly fit the bill. They seem to reliably not show anything when in a <span>, but they (particularly the second option) might have a minor effect on copy/paste and word breaking in some cases.
似乎有两种选择主要适合该法案。它们似乎在中可靠地不显示任何内容,但它们(特别是第二个选项)在某些情况下可能对复制/粘贴和断字产生轻微影响。
Zero-width space
​ aka ​ which behaves the same as the (now in HTML5) <wbr> - used to make words break at certain points without changing the display of the words.
aka其行为与(现在在HTML5中)
<h1>This text is full<span>​</span> of spans with char<span>​</span>acte<span></span>rs that affe<span>​</span>ct word brea<span></span>king but don't show up</h1>
<h1>Especially in das super<span>​</span>douper​crazy<span>​</span>long<span></span>worden.</h1>Seems to work fine on modern browsers and IE7+ (not tested on IE6).
似乎在现代浏览器和IE7 +上运行良好(未在IE6上测试)。
Soft hyphen
­ - like a zero-width space but (in theory) adds a hyphen when it breaks a word across a line.
&害羞; - 就像一个零宽度的空间,但(理论上)当它在一条线上打破一个单词时添加一个连字符。
<h1>This text is full<span>­</span> of spans with char<span>­</span>acte<span></span>rs that affe<span>­</span>ct word brea<span></span>king but don't show up</h1>
<h1>Especially in das super<span>­</span>douper­crazy<span>­</span>long<span></span>worden.</h1>
<h1>Example where das super­douper­crazy­longword contains no spans.</h1>Fine on modern browsers and IE7+ (not tested on IE6), though as some comments note there are issues with these turning into regular hyphens when copied and pasted, for example, here's how it pastes from Chrome to Notepad, on Windows 8.1:
在现代浏览器和IE7 +上都没问题(在IE6上未经过测试),但有些评论指出,在复制和粘贴时会出现问题变成常规连字符,例如,在Windows 8.1上,它是如何从Chrome粘贴到记事本的:
Within a span, it seems to never add a hyphen (but still better to use zero-width spaces if possible).
在一个范围内,似乎永远不会添加连字符(但如果可能的话,最好使用零宽度空格)。
Edit: I found an older SO answer discussing these as a solution to a different problem which suggests these are robust except for possible copy/paste quirks.
编辑:我发现一个较旧的SO答案讨论这些作为解决另一个问题的解决方案,这表明除了可能的复制/粘贴怪癖之外,这些问题都很强大。
The only other issue with these I could find in research is that apparently some search engines may treat words containing these as being split (e.g. awe­some might match searches for awe and some instead of awesome).
我在研究中可以找到的唯一另一个问题是,显然有些搜索引擎可能会将包含这些内容的单词视为分裂(例如,敬畏和害羞;有些可能会匹配搜索敬畏和某些搜索而不是令人敬畏)。
#2
6
There are two characters that are graphic characters but defined to be zero width: U+200B ZERO WIDTH SPACE and U+FEFF ZERO WIDTH NO-BREAK SPACE. The former acts like a space character, so that it is a separator between words and allows line breaking in formatting, whereas the latter explicitly forbids line breaks. It depends on the purpose and context which one you should use. The can be represented in HTML as ​ and .
有两个字符是图形字符,但定义为零宽度:U + 200B ZERO WIDTH SPACE和U + FEFF ZERO WIDTH NO-BREAK SPACE。前者的作用类似于空格字符,因此它是单词之间的分隔符,允许格式化中的换行符,而后者明确禁止换行符。这取决于你应该使用的目的和背景。可以用HTML表示为和。
There characters work well in most browsing situations. However, in IE 6, they tend to be rendered as small rectangles, since IE 6 does not know these characters and tries to render them as if they were graphic characters (which lack glyphs).
在大多数浏览情况下,角色都能正常运行但是,在IE 6中,它们往往被渲染为小矩形,因为IE 6不知道这些字符,并试图将它们渲染为图形字符(缺少字形)。
There are also control characters that are allowed in HTML, such as U+200E LEFT-TO-RIGHT MARK and U+200D ZERO WIDTH JOINER. They have no rendering as such, though they may affect rendering of graphic characters, e.g. by setting writing direction, affecting ligature behavior, etc. Due to the possibility of such effects, it might be risky to use them as “dummy” characters.
HTML中还允许使用控制字符,例如U + 200E LEFT-TO-RIGHT MARK和U + 200D ZERO WIDTH JOINER。它们没有这样的渲染,尽管它们可能影响图形字符的渲染,例如,通过设置书写方向,影响连字行为等。由于这种效果的可能性,将它们用作“虚拟”字符可能有风险。
#1
20
There seem to be two options that mostly fit the bill. They seem to reliably not show anything when in a <span>, but they (particularly the second option) might have a minor effect on copy/paste and word breaking in some cases.
似乎有两种选择主要适合该法案。它们似乎在中可靠地不显示任何内容,但它们(特别是第二个选项)在某些情况下可能对复制/粘贴和断字产生轻微影响。
Zero-width space
​ aka ​ which behaves the same as the (now in HTML5) <wbr> - used to make words break at certain points without changing the display of the words.
aka其行为与(现在在HTML5中)
<h1>This text is full<span>​</span> of spans with char<span>​</span>acte<span></span>rs that affe<span>​</span>ct word brea<span></span>king but don't show up</h1>
<h1>Especially in das super<span>​</span>douper​crazy<span>​</span>long<span></span>worden.</h1>Seems to work fine on modern browsers and IE7+ (not tested on IE6).
似乎在现代浏览器和IE7 +上运行良好(未在IE6上测试)。
Soft hyphen
­ - like a zero-width space but (in theory) adds a hyphen when it breaks a word across a line.
&害羞; - 就像一个零宽度的空间,但(理论上)当它在一条线上打破一个单词时添加一个连字符。
<h1>This text is full<span>­</span> of spans with char<span>­</span>acte<span></span>rs that affe<span>­</span>ct word brea<span></span>king but don't show up</h1>
<h1>Especially in das super<span>­</span>douper­crazy<span>­</span>long<span></span>worden.</h1>
<h1>Example where das super­douper­crazy­longword contains no spans.</h1>Fine on modern browsers and IE7+ (not tested on IE6), though as some comments note there are issues with these turning into regular hyphens when copied and pasted, for example, here's how it pastes from Chrome to Notepad, on Windows 8.1:
在现代浏览器和IE7 +上都没问题(在IE6上未经过测试),但有些评论指出,在复制和粘贴时会出现问题变成常规连字符,例如,在Windows 8.1上,它是如何从Chrome粘贴到记事本的:
Within a span, it seems to never add a hyphen (but still better to use zero-width spaces if possible).
在一个范围内,似乎永远不会添加连字符(但如果可能的话,最好使用零宽度空格)。
Edit: I found an older SO answer discussing these as a solution to a different problem which suggests these are robust except for possible copy/paste quirks.
编辑:我发现一个较旧的SO答案讨论这些作为解决另一个问题的解决方案,这表明除了可能的复制/粘贴怪癖之外,这些问题都很强大。
The only other issue with these I could find in research is that apparently some search engines may treat words containing these as being split (e.g. awe­some might match searches for awe and some instead of awesome).
我在研究中可以找到的唯一另一个问题是,显然有些搜索引擎可能会将包含这些内容的单词视为分裂(例如,敬畏和害羞;有些可能会匹配搜索敬畏和某些搜索而不是令人敬畏)。
#2
6
There are two characters that are graphic characters but defined to be zero width: U+200B ZERO WIDTH SPACE and U+FEFF ZERO WIDTH NO-BREAK SPACE. The former acts like a space character, so that it is a separator between words and allows line breaking in formatting, whereas the latter explicitly forbids line breaks. It depends on the purpose and context which one you should use. The can be represented in HTML as ​ and .
有两个字符是图形字符,但定义为零宽度:U + 200B ZERO WIDTH SPACE和U + FEFF ZERO WIDTH NO-BREAK SPACE。前者的作用类似于空格字符,因此它是单词之间的分隔符,允许格式化中的换行符,而后者明确禁止换行符。这取决于你应该使用的目的和背景。可以用HTML表示为和。
There characters work well in most browsing situations. However, in IE 6, they tend to be rendered as small rectangles, since IE 6 does not know these characters and tries to render them as if they were graphic characters (which lack glyphs).
在大多数浏览情况下,角色都能正常运行但是,在IE 6中,它们往往被渲染为小矩形,因为IE 6不知道这些字符,并试图将它们渲染为图形字符(缺少字形)。
There are also control characters that are allowed in HTML, such as U+200E LEFT-TO-RIGHT MARK and U+200D ZERO WIDTH JOINER. They have no rendering as such, though they may affect rendering of graphic characters, e.g. by setting writing direction, affecting ligature behavior, etc. Due to the possibility of such effects, it might be risky to use them as “dummy” characters.
HTML中还允许使用控制字符,例如U + 200E LEFT-TO-RIGHT MARK和U + 200D ZERO WIDTH JOINER。它们没有这样的渲染,尽管它们可能影响图形字符的渲染,例如,通过设置书写方向,影响连字行为等。由于这种效果的可能性,将它们用作“虚拟”字符可能有风险。