Question

我有一个标题。在标题的最后一个单词的末尾是一个短划线（单词和短划线之间没有空格。）

当浏览器窗口变小时，em破折号会中断并继续换行。在他们自己的线上有一个短划线是糟糕的排版。

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

以下是代码：

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

我尝试用span white-space: nowrap;包裹最后一个单词和短划线。它适用于我的计算机，但我无法理解为什么会出现这种情况，因为没有空格，我担心它不适用于所有浏览器。

我不能使用不间断的连字符，因为它需要是一个短划线，我不认为有一个非破坏的连字符。

由于

Answer 1

这适用于各种浏览器：

span { white-space: nowrap }

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

您写道：

我尝试用span white-space: nowrap;包裹最后一个单词和短划线。它适用于我的计算机，但我无法理解为什么会出现这种情况，因为没有空格，我担心它不适用于所有浏览器。

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

来自MDN：

<强> nowrap

与正常情况一样折叠空格，但会抑制换行符（文本   包装）在文本中。

Answer 2

如果你可以完全控制H1标签的内容，你可以在一个内嵌块跨度中包装单词和短划线。

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

Answer 3

您可以尝试使用解决方案here来解决您不想破坏的文本：

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

希望这适合你！

Answer 4

创建一个简单的类和伪元素，它将封装nowrap和符号。现在，您可以将该类应用于元素上的范围：

＆＃13;

.emdash {
  white-space: nowrap;
}

.emdash::after {
  content: "\2014";
}

＆＃13;

<h1>XYZ consultancy is super great and <span class="emdash">brilliant</span></h1>

＆＃13;