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

Question

我有一个标题。标题最后一个单词的末尾是一个长划线（单词和长划线之间没有白色space）。

当浏览器 window 变小时，破折号会断开并换行。在自己的行上有一个 em 破折号是糟糕的排版。

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

代码如下：

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

我试过用 white-space: nowrap; 在 span 中包含最后一个单词和破折号。它可以在我的电脑上运行，但我不明白为什么会这样，因为没有白色 space，我担心它不能在所有浏览器上运行。

我不能使用 non-breaking 连字符，因为它必须是长划线，但我认为没有 non-breaking 长划线。

谢谢

Answer 1

如果您可以完全控制 H1 标签的内容，您可以将单词和破折号包含在内联块范围内。

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

Answer 2

这适用于各种浏览器：

span { white-space: nowrap }

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

您写道：

I've tried wrapping the last word and the em dash in a span with white-space: nowrap;. It works on my computer, but I can't understand why this is the case as there is no white space and I'm concerned that it won't work on all browsers.

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

来自MDN：

nowrap

Collapses whitespace as for normal, but suppresses line breaks (text wrapping) within text.

Answer 3

您可以尝试使用解决方案 here，将您不想打断的文本像这样包裹起来：

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

希望对你有用！

Answer 4

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

.emdash {
  white-space: nowrap;
}

.emdash::after {
  content: "14";
}

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

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

How to stop an em dash from wrapping by itself?

html

css

word-wrap