连字符后没有换行符-Java 学习之路

293

我希望在连字符 - 之后防止断行，并且与所有浏览器兼容 .

例：

我有这样的文字： 3-3/8" 在HTML中是这样的： 3-3/8”

问题是，在一行的末尾附近，由于连字符，它会断开并包裹到下一行而不是像完整的单词一样对待它...

3-
3/8"

我试过插入"zero width no break character"，  但没有运气......

3-&#65279;3/8&rdquo;

我在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" />

在连字符后我有什么方法可以防止这些断线？我不需要任何适用于整个页面的解决方案...只是我可以根据需要插入的内容，如“零宽度无中断字符”，除了一个有效 .

这是一个演示 . 只需将框架缩小，直到连字符处的线条断开 .

http://jsfiddle.net/RagKH/

5 回答

226

尝试使用非破坏连字符 ‑ . 我再分开了 .

回复于 2024-04-29T23:58:16+08:00
2
您也可以用相关文本换行
```
<span style="white-space: nowrap;"></span>
```
回复于 2024-04-29T23:58:16+08:00
517
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&nbsp;there&nbsp;is&nbsp;a&nbsp;-&nbsp;and&nbsp;words&nbsp;are&nbsp;separated&nbsp;by&nbsp;the&nbsp;whitespace&nbsp;code&nbsp;&amp;nbsp;&nbsp;then&nbsp;IE&nbsp;will&nbsp;wrap&nbsp;on&nbsp;the&nbsp;dash.</p>
        </div>
    </body>
</html>
```
回复于 2024-04-29T23:58:16+08:00
20
你也可以通过插入“U+2060 Word Joiner”来做到"the joiner way" .

如果Accept-Charset允许，则unicode字符本身可以 inserted directly 进入HTML输出 .

否则，可以使用实体编码来完成 . 例如 . 加入文本 red-brown ，使用：
```
red-&#x2060;brown
```
或（十进制等值）：
```
red-&#8288;brown
```
. 另一个可用的字符是“U+FEFF Zero Width No-break Space”[⁠⁠1]：
```
red-&#xfeff;brown
```
和（十进制当量）：
```
red-&#65279;brown
```
[1]：请注意，尽管此方法仍适用于Chrome等主流浏览器，但自Unicode 3.2以来已弃用 .

"the joiner way"与“U+2011 Non-breaking Hyphen”的比较：
- 单词joiner可用于所有其他字符，而不仅仅是连字符 .
- 使用单词joiner时，大多数渲染器会栅格化文本 identically . 在Chrome，FireFox，IE和Opera上，正常连字符的渲染，例如：
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

与正常连字符的渲染（使用U 2060 Word Joiner）相同，例如：

a-⁠b-⁠c-⁠d-⁠e-⁠f-⁠g-⁠h-⁠i-⁠j-⁠k-⁠l-⁠s-⁠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 -z

. （差异的程度取决于浏览器和字体 . 例如，当使用字体声明“ arial ”时，Firefox和IE11显示相对较大的变化，而Chrome和Opera显示较小的变化 . ）

"the joiner way"与 <span class=c1></span> （CSS .c1 {white-space:nowrap;} ）和 <nobr></nobr> 的比较：
- 单词joiner可用于限制HTML标签使用的情况，例如网站和论坛的形式 .
- 在spectrum of presentation and content上，与标签相比，大多数人会认为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
回复于 2024-04-29T23:58:16+08:00
13
晚到晚会，但我觉得这其实是最优雅的 . 使用WORD JOINER Unicode字符⁠在你的连字符的两边，或者破折号，或任何角色 .

所以，像这样：
```
&#8288;—&#8288;
```
这会将两端的符号连接到其邻居（不添加空格）并防止换行 .
回复于 2024-04-29T23:58:16+08:00

连字符后没有换行符

5 回答

相关问题