在所有浏览器上是否存在空白(包括没有空格)的 HTML 字符?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/26972529/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 03:04:44  来源:igfitidea点击:

Is there a HTML character that is blank (including no whitespace) on all browsers?

htmlcross-browser

提问by user56reinstatemonica8

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.

想象一下(简单的简单示例)<span class="placeholder" data-type="username"></span>,如果用户登录,它会填充用户的用户名 - 但是这个老式的 CMS 将其视为空并将其删除。

回答by user56reinstatemonica8

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.

似乎有两种选择最符合要求。它们似乎在 a 中可靠地不显示任何内容<span>,但它们(尤其是第二个选项)在某些情况下可能对复制/粘贴和断字有轻微影响。

Zero-width space

零宽度空间

&#8203;aka &#x200B;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.

&#8203;aka 的&#x200B;行为与(现在在 HTML5 中)相同<wbr>- 用于使单词在某些点中断而不改变单词的显示。

<h1>This text is full<span>&#8203;</span> of spans with char<span>&#8203;</span>acte<span></span>rs that affe<span>&#8203;</span>ct word brea<span></span>king but don't show up</h1>
<h1>Especially in das super<span>&#8203;</span>douper&#8203;crazy<span>&#8203;</span>long<span></span>worden.</h1>

Seems to work fine on modern browsers and IE7+ (not tested on IE6).

似乎在现代浏览器和 IE7+ 上运行良好(未在 IE6 上测试)。



Soft hyphen

软连字符

&shy;- like a zero-width space but (in theory) adds a hyphen when it breaks a word across a line.

&shy;- 就像一个零宽度的空格,但是(理论上)当它在一行中打断一个单词时会添加一个连字符。

<h1>This text is full<span>&shy;</span> of spans with char<span>&shy;</span>acte<span></span>rs that affe<span>&shy;</span>ct word brea<span></span>king but don't show up</h1>
<h1>Especially in das super<span>&shy;</span>douper&shy;crazy<span>&shy;</span>long<span></span>worden.</h1>
<h1>Example where das super&shy;douper&shy;crazy&shy;longword contains no spans.</h1>

Fine on modern browsers and IE7+ (not tested on IE6), though as some comments notethere 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 粘贴到记事本的方式:

enter image description here

在此处输入图片说明

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 problemwhich suggests these are robust except for possible copy/paste quirks.

编辑:我发现了一个较旧的 SO 答案,将这些作为不同问题的解决方案进行讨论,这表明除了可能的复制/粘贴怪癖外,这些都是健壮的。

The only other issue with these I could find in research is that apparentlysome search engines may treat words containing these as being split (e.g. awe&shy;somemight match searches for aweand someinstead of awesome).

我在研究中发现的与这些有关的唯一其他问题是,显然某些搜索引擎可能会将包含这些的单词视为已拆分(例如,awe&shy;some可能匹配搜索awesome而不是awesome)。

回答by Jukka K. Korpela

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 &#x200b;and &#xfeff;.

有两个字符是图形字符但定义为零宽度:U+200B 零宽度空间和 U+FEFF 零宽度无间断空间。前者就像一个空格字符,因此它是单词之间的分隔符并允许在格式化时换行,而后者明确禁止换行。这取决于您应该使用哪一种的目的和上下文。可以在 HTML 中表示为&#x200b;&#xfeff;

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。它们本身没有渲染,尽管它们可能会影响图形字符的渲染,例如通过设置书写方向、影响连字行为等。由于这种效果的可能性,将它们用作“虚拟”字符可能是有风险的。