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

时间:2014-11-17 12:15:33

标签: html cross-browser

是否有一个HTML字符,在所有(主要)浏览器上(加上IE8可悲)没有显示任何内容并且不添加任何额外空间?

所以, 的替代品,但不会在页面上添加空格,并且不会出现在一个丑陋的"无法识别的角色中#34;标记或?


为什么:在我的情况下,我试图解决旧的专有CMS上的问题,该问题正在删除所需的空白但必要的HTML元素,因为系统的其他部分将动态填充它们。

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

2 个答案:

答案 0 :(得分:28)

似乎有两种选择主要适合该法案。在<span>中,它们似乎可靠地不显示任何内容,但它们(特别是第二个选项)在某些情况下可能对复制/粘贴和断字产生轻微影响。

零宽度空间

&#8203;又名&#x200B;,其行为与(now in HTML5<wbr>相同 - 用于在不改变单词显示的情况下使单词在某些点处中断。

&#13;
&#13;
<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>
&#13;
&#13;
&#13;

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


软连字符

&shy; - 就像一个零宽度的空间,但(理论上)在一条线上打破一个单词时添加一个连字符。

&#13;
&#13;
<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>
&#13;
&#13;
&#13;

在现代浏览器和IE7 +(未在IE6上测试)上运行良好,但as some comments note在复制和粘贴时会出现问题变成常规连字符,例如,这里是如何从Chrome粘贴到记事本,在Windows 8.1上:

enter image description here

在一个范围内,似乎永远不会添加连字符(但如果可能的话,最好使用零宽度空格)。


编辑:I found an older SO answer discussing these as a solution to a different problem表明除了可能的复制/粘贴怪癖之外,这些都很强大。

我在研究中发现的唯一其他问题是apparently某些搜索引擎可能会将包含这些内容的单词视为已拆分(例如awe&shy;some可能会匹配awe和{{}}的搜索{1}}代替some)。

答案 1 :(得分:6)

有两个字符是图形字符,但定义为零宽度:U + 200B ZERO WIDTH SPACE和U + FEFF ZERO WIDTH NO-BREAK SPACE。前者的作用类似于空格字符,因此它是单词之间的分隔符,允许格式化中的换行,而后者明确禁止换行。这取决于你应该使用的目的和背景。可以在HTML中将其表示为&#x200b;&#xfeff;

在大多数浏览情况下,角色都能很好地运作。但是,在IE 6中,它们往往被渲染为小矩形,因为IE 6不知道这些字符,并试图将它们渲染为图形字符(缺少字形)。

HTML中还允许使用控制字符,例如U + 200E LEFT-TO-RIGHT MARK和U + 200D ZERO WIDTH JOINER。它们没有这样的渲染,尽管它们可能会影响图形字符的渲染,例如,通过设置书写方向,影响连字行为等。由于这种效果的可能性,将它们用作“虚拟”字符可能有风险。