我希望防止在连字符之后出现换行符-在与所有浏览器兼容的情况下。
例子:
我有这个文本:3-3/8"在HTML中是这样的:3-3/8”
问题是,在接近一行的末尾,由于连字符,它会中断并换行到下一行,而不是将其视为一个完整的单词……
3-
3/8"
我已经尝试插入“零宽度无间断字符”,运气不好……
3-3/8”
我在Safari中看到了这一点,并认为在所有浏览器中都是一样的。
下面是我的文档类型和字符编码…
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
有什么方法可以防止这些断行后连字符?我不需要任何解决方案,适用于整个页面…只是一些我可以在需要时插入的东西,比如“零宽度无中断字符”,除了一个有效的字符。
这是一个演示。只要使框架变窄,直到在连字符处断线。
http://jsfiddle.net/RagKH/
你也可以通过插入“U+2060 Word joiner”来实现“joiner方式”。
如果Accept-Charset允许,unicode字符本身可以直接插入到HTML输出中。
否则,可以使用实体编码来完成。例如,加入文本红棕色,使用:
red-⁠brown
或(十进制等效):
red-⁠brown
. 另一个可用的字符是“U+FEFF零宽度无间断空格”[]:
red-brown
和(十进制等效):
red-brown
[1]:注意,虽然此方法在Chrome等主要浏览器中仍然有效,但自Unicode 3.2以来已弃用。
“拼接方式”与“U+2011不间断连字符”的比较:
The word joiner can be used for all other characters, not just hyphens.
When using the word joiner, most renderers will rasterize the text identically. On Chrome, FireFox, IE, and Opera, the rendering of normal hyphens, eg:
a-b-c-d-e-f-g-h-i-j-k-l-m-n-o-p-q-r-s-t-u-v-w-x-y-z
is identical to the rendering of normal hyphens (with U+2060 Word Joiner), eg:
a-b-c-d-e-f-g-h-i-j-k-l-m-n-o-p-q-r-s-t-u-v-w-x-y-z
while the above two renders differ from the rendering of "Non-breaking Hyphen", eg:
a‑b‑c‑d‑e‑f‑g‑h‑i‑j‑k‑l‑m‑n‑o‑p‑q‑r‑s‑t‑u‑v‑w‑x‑y‑z
. (The extent of the difference is browser-dependent and font-dependent. E.g. when using a font declaration of "arial", Firefox and IE11 show relatively huge variations, while Chrome and Opera show smaller variations.)
<span class=c1></span> (CSS .c1 {white-space:nowrap;})和<nobr></nobr>“joiner way”的比较:
joiner这个词可以用于限制HTML标签使用的情况,例如网站和论坛的形式。
在表示和内容的范围内,与标签相比,大多数人会认为单词joiner更接近内容。
•在Windows 8.1 Core 64位上使用以下方法进行测试:
•ie 11.0.9600.18205
•Firefox 43.0.4
•Chrome 48.0.2564.109(官方版本)m(32位)
•Opera 35.0.2066.92