晚会晚了，但是我认为这实际上是最优雅的。使用WORD JOINER Unicode字符＆＃8288 ; 在连字符，破折号或任何字符的任一侧。

因此，像这样：

⁠—⁠

这会将符号的两端连接到其相邻符号（不添加空格），并防止换行。

您也可以使用

<span style="white-space: nowrap;"></span>

您也可以通过插入“ 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可以用于所有其他字符，而不仅仅是连字符。

• 当使用词语木匠，大多数渲染器将栅格化文字相同。在Chrome，FireFox，IE和Opera上，正常连字符的渲染，例如：

  abcdefghijklmnopqrstu-vwxyz

  与普通连字符（使用U + 2060 Word Joiner）的呈现相同，例如：

  a-b-c-d-e-f-g-g-h-i-j-k-l-⁠m-⁠n-o-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-y ž

  . (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.)

Comparison of "the joiner way" with <span class=c1></span> (CSS .c1 {white-space:nowrap;}) and <nobr></nobr>:

• The word joiner can be used for situations where usage of HTML tags is restricted, e.g. forms of websites and forums.

• On the spectrum of presentation and content, majority will consider the word joiner to be closer to content, when compared to tags.

^{• As tested on Windows 8.1 Core 64-bit using:
    • IE 11.0.9600.18205
    • Firefox 43.0.4
    • Chrome 48.0.2564.109 (Official Build) m (32-bit)
    • Opera 35.0.2066.92}

尝试使用不间断的连字符‑。我在jsfiddle中用该字符替换了破折号，将框架缩小到可以缩小的程度，并且该行不再拆分。