CSS换行并带连字符

Question

我可以在一个 div 中有一行文本，看起来可能像下面这样：

A really long user defined team Name 1 (7-0)

7-0将是该团队的战绩。这条信息包含在一个特定宽度的div中，有时浏览器会在连字符处进行换行，这是不希望看到的，因为连字符应该被视为一个单词的一部分。所以最终可能出现以下情况：

A really long user defined team Name 1 (7
-0)

有没有一种方法可以使单词换行时将连字符视为普通字符，而不是应该支持断点的位置？

- user417918

Answer 1

尽管已接受的答案完全可以胜任此工作，但您应考虑使用更明显的CSS样式：

CSS：

.together {
    white-space: nowrap;
}

HTML:

<p>A really long user defined team Name 1 <span class="together">(7-0)</span></p>

- NGLN

Answer 2

根据语境，将其作为内容问题来解决可能比在展示层面上解决更加合适。假设你希望即使有人将其从你的网站复制/粘贴到其他地方，也不会因为单词过长而打破格式，可以使用非断行连字符替换普通连字符。Unicode U+02011 可以像这样在 HTML 中插入：A really long user defined team Name 1 (7‑0)。

- yeahforbes

Answer 3

http://jsfiddle.net/zfsYK/4/

这里是结果..

我刚刚用一个设置为display:inline的div包裹了您不想打断的文本。

现在似乎无法打断它了。

- samccone

---

谢谢你的提示。 我在外部div中添加了一个宽度：http://jsfiddle.net/zfsYK/2/ 在火狐浏览器中效果很好，但在chrome中仍然有问题。你看到了同样的情况吗？ - user417918

http://jsfiddle.net/zfsYK/4/ 好了，修复了，只需要将它变成inline-block即可...我将上面的inline留作回落（fallback），以防不支持inline-block。@user417918 - samccone

链接失效，请勿链接到外部网站或在此处发布代码。 - Marcel

Answer 4

对于任何正在寻找解决方案的人。您应该将white-space: nowrap应用于文本中每个连字符单词出现的位置。我为自己做了这个，也许可以帮助到您：

https://jsfiddle.net/ooj6kmx1/21/

敬礼

- Guillermo Gimenez