eme*_*his 6 html html5 whitespace spaces
如果我想强制两个视觉显示两个空格我可以这样做:
FOO BAR FOO BAR
Run Code Online (Sandbox Code Playgroud)
这将回避HTML的空白折叠功能,但它也会导致这样的换行符:
FOO
BAR FOO
BAR
Run Code Online (Sandbox Code Playgroud)
是否有一个替代品会像一个破坏的常规空间?这是我要问的伪代码:
FOO
BAR&bsp;&bsp;
FOO
BAR
Run Code Online (Sandbox Code Playgroud)
ps:我知道这可以用CSS完成.这不是我对此感兴趣的.
SPACE
(U+0020
)字符的渲染宽度取决于字体,通常为1/4 em(经常调整).
这意味着,平均而言,Unicode FOUR-PER-EM SPACE
(U+2005
)应该起作用,因为它被定义为:1/4 em.
重复:foo  bar  
渲染'易碎' foo bar foo bar etc.
(有2个'空格')(在我的电脑上用FF).
Code Name of the character Width of the character U+0020 SPACE Depends on font, typically 1/4 em, often adjusted U+00A0 NO-BREAK SPACE As a space, but often not adjusted U+1680 OGHAM SPACE MARK Unspecified; usually not really a space but a dash U+180E MONGOLIAN VOWEL SEPARATOR No width U+2000 EN QUAD 1 en (= 1/2 em) U+2001 EM QUAD 1 em (nominally, the height of the font) U+2002 EN SPACE 1 en (= 1/2 em) U+2003 EM SPACE 1 em U+2004 THREE-PER-EM SPACE 1/3 em U+2005 FOUR-PER-EM SPACE 1/4 em U+2006 SIX-PER-EM SPACE 1/6 em U+2007 FIGURE SPACE "Tabular width", the width of digits U+2008 PUNCTUATION SPACE The width of a period "." U+2009 THIN SPACE 1/5 em (or sometimes 1/6 em) U+200A HAIR SPACE Narrower than THIN SPACE U+200B ZERO WIDTH SPACE Nominally no width, but may expand U+202F NARROW NO-BREAK SPACE Narrower than NO-BREAK SPACE (or SPACE) U+205F MEDIUM MATHEMATICAL SPACE 4/18 em U+3000 IDEOGRAPHIC SPACE The width of ideographic (CJK) characters. U+FEFF ZERO WIDTH NO-BREAK SPACE No width (the character is invisible)
请注意,EN SPACE
(= 1/2 em)因此应该导致相同的视觉最终结果(2个空格),只使用一个unicode字符(并在html-source !!中保存7个字符)
SPACE
和之间的区别QUAD
是(来自维基百科):
en quad和en空间通常是同义词,因为它们都以宽度为1 en的空间开始.然而,在电子出版中,通过认为如果字体被缩小或扩展以改变字符的宽度,两者形成鲜明对比,则en quad的宽度保持为1 en,而en空间的宽度改变为与印刷字符.
希望这可以帮助!
编辑:
我对此进行了一些跨浏览器测试,包括同时出现的其他答案.
正如所指出的,我的建议依赖于字体制作者逻辑/懒惰的结论,他的SPACE
角色的宽度等于FOUR-PER-EM SPACE
(和一半的宽度EN QUAD
).
作为程序员,我不喜欢不确定性.
BoltCock的答案( <wbr>
)和Wesabi的回答( ​
)消除了宽度的不确定性.
具有讽刺意味的是,没有"最佳"(尚未):我的建议和Wesabi ​
使用旧版浏览器(IE6)/字体不支持的字符; 它们将呈现为白色方块?
.
BoltCock的<wbr>
,另一方面完美的作品在IE6,但对其他问题遭受:它不会在IE8工作(和其他一些人)(来源:0,1,2).
根据您的具体用例:Chris Nielsen的评论实际上可能是最好的跨浏览器解决方案: replace one of the entities with a normal space
...
编辑2:
结束思路:从语义的角度来看(文本内容本身),你正在打击一个白色空间折叠功能(你将其标记为HTML).因此,"最好"的解决办法是让你的内容,因为它是,并且(正如你指出你自己):使用CSS来禁用空白折叠功能.
如果您确实必须在 HTML 的限制内工作,并且不用担心空间宽度,您可以<wbr>
在 s序列之后添加一个元素
,如下所示:
FOO
BAR <wbr>FOO
BAR
Run Code Online (Sandbox Code Playgroud)
如果您想要一个不会阻止换行符的比正常空间更宽的空间,您可能需要一个 en 空格 (U+2002,  
) 或一个 em 空格 (U+2003,  
)。通常,一个 en 空间是普通空间的两倍宽,一个 em 空间是四倍宽。