连字符后没有换行符
Spa*_*rky 326 html css line-breaks character-encoding hyphenation
我希望在-与所有浏览器兼容的个案基础上阻止连字符后的换行符.
例:
我有这个文本: 3-3/8"在HTML中是这样的: 3-3/8”
问题是,在一行的末尾附近,由于连字符,它会断开并包裹到下一行而不是像完整的单词一样对待它...
3-
3/8"
我试过插入"零宽度不中断字符",没有运气......
3-3/8”
我在Safari中看到了这一点,并认为它在所有浏览器中都是一样的.
以下是我doctype和字符编码......
<!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" />
在连字符后我有什么方法可以防止这些断线？我不需要任何适用于整个页面的解决方案...只是我可以根据需要插入的内容,如"零宽度无中断字符",除了一个有效.
这是一个演示.只需将框架缩小,直到连字符处的线条断开.
Can*_*ice 559
尝试使用不间断的连字符‑.我已经用jsfiddle中的那个字符替换了破折号,将框架缩小到尽可能小的范围,并且线条不再分裂.
- 结果可能与正常连字符不同的原因是许多字体不包含非断开连字符.这会强制浏览器使用不同的字体,而非破坏连字符看起来与**字体中的普通连字符相同,但不能保证它与来自不同字体的普通连字符匹配. (21认同)
- 我认为它就像是不间断的空间,所以我只是搜索了"非破坏性破折号",[最后来到这里](http://www.cs.sfu.ca/~ggbaker/reference/characters/ #短跑).:-) (10认同)
- 在IE8/9中,此角色的渲染时间比典型的连字符长.它似乎与en-dash大小相同. (6认同)
- 我认为Deb的答案是最好的. (5认同)
小智 247
您也可以用相关文本换行
<span style="white-space: nowrap;"></span>
- 如果你想要包装空格(用户看到空格的空白处 - 没有),但是你不想用连字符分隔单词,例如单词"e-mail",@ CMH这没有用.在这种情况下,接受的答案有帮助 (36认同)
- 是的,这是一个比接受的imho更好的答案.谢谢@Deb. (17认同)
- 在这种情况下,您只能在"电子邮件"周围使用span. (12认同)
- @Sparky使用不同字符的一个问题是它会弄乱搜索结果.试图在页面上找到"3-3/8"将找不到不间断的连字符. (10认同)
- @CMH,这是一个很好的答案,也有效,所以我投了票.但是,我选择不接受这个答案,因为我要求一个不会自动突破到下一行的角色.在某些浏览器中,"非破坏连字符"(`‑`)***可能会比常规连字符略长,这对我来说是微不足道的. (2认同)
mrt*_*man 21
IE8/9使CanSpice的答案中提到的非破坏连字符比典型的连字符更长.它是en-dash的长度而不是典型的连字符.这种显示差异对我来说是一个交易破坏者.
因为我不能使用Deb我指定的CSS答案而是选择不使用break标记.
<nobr>e-mail</nobr>
另外我发现了一个特定的场景,导致IE8/9在连字符上断开.
- 字符串包含由不间断空格分隔的单词 -
- 宽度有限
- 包含破折号
IE渲染它就像这样.
以下代码再现了上图所示的问题.我不得不使用元标记强制渲染到IE9,因为IE10修复了这个问题.没有小提琴,因为它不支持元标记.
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<meta charset="utf-8"/>
<style>
body { padding: 20px; }
div { width: 300px; border: 1px solid gray; }
</style>
</head>
<body>
<div>
<p>If there is a - and words are separated by the whitespace code &nbsp; then IE will wrap on the dash.</p>
</div>
</body>
</html>
- 使用`nobr`是最跨浏览器的方式,并且独立于字体和CSS.`nobr`元素没有在HTML规范中定义,但这应该只被视为形式.但是如果你*必须*通过HTML规范编写,那么Deb的答案,使用CSS,是最好的选择. (6认同)
- 我很好奇为什么你不能使用CSS解决方案. (5认同)
- @RyanAhearn - 我正在使用第三方工具,它不能让我对html有太多控制权.它不支持内联标记声明. (2认同)
- 请注意，`nobr` 标签是非标准的，随时可能损坏。MDN 文档不建议使用此标签：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/nobr (2认同)
Pac*_*ier 16
你也可以通过插入" U+2060Word Joiner " 来实现"木匠方式".
如果Accept-Charset允许,可以将unicode字符本身直接插入HTML输出中.
否则,可以使用实体编码来完成.例如,要加入文本red-brown,请使用:
red-⁠brown
或(十进制等值):
red-⁠brown
.另一个可用的字符是" U+FEFF零宽度不间断空间 " [1]:
red-brown
和(十进制当量):
red-brown
[1]:请注意,尽管此方法仍适用于Chrome等主流浏览器,但自Unicode 3.2以来已弃用.
"木匠方式"与" U+2011非破解连字符 "的比较:
单词joiner可用于所有其他字符,而不仅仅是连字符.
使用单词joiner时,大多数渲染器会以相同的方式栅格化文本.在Chrome,FireFox,IE和Opera上,正常连字符的渲染,例如:
ABCDEFGHIJKLMNOPQRSTU-VWXYZ
与正常连字符的渲染(使用U + 2060 Word Joiner)相同,例如:
一个-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
而上述两个渲染与" 非破坏连字符 "的渲染不同,例如:
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- ž
.(差异的程度取决于浏览器和字体.例如,当使用"
arial" 字体声明时,Firefox和IE11显示相对较大的变化,而Chrome和Opera显示较小的变化.)
"木匠方式"与<span class=c1></span>(CSS .c1 {white-space:nowrap;})的比较和<nobr></nobr>:
•在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
Eck*_*ein 10
晚到晚了，但我觉得这其实是最优雅的。使用 WORD JOINER Unicode 字符 ; 在连字符、破折号或任何字符的任一侧。
所以，像这样：
⁠—⁠
这会将两端的符号连接到其邻居（不添加空格）并防止换行。