如何阻止破折号自行包装？答案

【问题标题】：How to stop an em dash from wrapping by itself?如何阻止破折号自行包装？
【发布时间】：2017-06-23 13:39:49
【问题描述】：

我有一个标题。标题最后一个单词的末尾是一个破折号（单词和破折号之间没有空格）。

当浏览器窗口变小时，破折号会中断并换行。在自己的行上有一个破折号是不好的排版。

如何停止破折号前的换行（以便最后一个单词继续到新行）？

代码如下：

&lt;h1&gt;XYZ consultancy is super great and brilliant&amp;mdash;&lt;/h1&gt;

我尝试用white-space: nowrap; 将最后一个单词和破折号包裹在span 中。它可以在我的计算机上运行，但我不明白为什么会这样，因为没有空格，我担心它不适用于所有浏览器。

我不能使用不间断的连字符，因为它必须是一个破折号，而且我不认为有一个不间断的破折号。

谢谢

【问题讨论】：

【解决方案1】：

这适用于浏览器：

span { white-space: nowrap }

&lt;h1&gt;XYZ consultancy is super great and &lt;span&gt;brilliant&amp;mdash;&lt;/span&gt;&lt;/h1&gt;

你写道：

我尝试用white-space: nowrap; 将最后一个单词和破折号包裹在span 中。它可以在我的计算机上运行，但我不明白为什么会这样，因为没有空格，我担心它不适用于所有浏览器。

你想多了（或过于字面意思）。 white-space 属性的 nowrap 值可防止文本换行。这就是它的作用。简单明了。

来自MDN：

nowrap

像正常一样折叠空白，但禁止换行（文本换行）在文本中。

【讨论】：

【解决方案2】：

如果您可以完全控制 H1 标记的内容，您可以将单词和破折号包装在一个内联块跨度中。

<h1>XYZ consultancy is super great and <span style="display:inline-block;">brilliant&mdash;</span></h1>

【讨论】：

【解决方案3】：

您可以尝试使用here 解决方案，将您不想破坏的文本包装成这样：

<h1>XYZ consultancy is super great and <nobr>brilliant&mdash;</nobr></h1>

希望对你有用！

【讨论】：

【解决方案4】：

创建一个简单的类和伪元素来封装 nowrap 和符号。现在您可以将类应用于元素上的跨度：

.emdash {
  white-space: nowrap;
}

.emdash::after {
  content: "\2014";
}

&lt;h1&gt;XYZ consultancy is super great and &lt;span class="emdash"&gt;brilliant&lt;/span&gt;&lt;/h1&gt;

【讨论】：