如何阻止 em 破折号自行包装? [英] How to stop an em dash from wrapping by itself?

问题描述

我有一个标题.标题最后一个单词的末尾是一个破折号(单词和破折号之间没有空格).

I have a heading. At the end of the last word of the heading is an em dash (there is no white space between the word and the em dash).

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

When the browser window is made smaller the em dash breaks and goes on to a new line. Having an em dash on its own line is bad typography.

如何在破折号之前停止换行(以便最后一个单词运行到新行)?

How do I stop the line breaking before the dash (so that the last word runs on to the new line)?

代码如下:

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

我已经尝试用 white-space: nowrap; 将最后一个单词和破折号包裹在 span 中.它可以在我的电脑上运行，但我不明白为什么会这样，因为没有空格，而且我担心它不能在所有浏览器上运行.

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.

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

I can't use a non-breaking hyphen, because it needs to be an em dash and I don't think there is a non-breaking em dash.

谢谢

推荐答案

这适用于跨浏览器:

span { white-space: nowrap }

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

你写道:

我已经尝试用 white-space: nowrap; 将最后一个单词和破折号包裹在 span 中.它可以在我的电脑上运行，但我不明白为什么会这样，因为没有空格，而且我担心它不能在所有浏览器上运行.

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 值可防止文本换行.这就是它的作用.简单明了.

You're overthinking it (or taking it too literally). The nowrap value of the white-space property prevents text wrapping. That's what it does. Plain and simple.

来自 MDN:

nowrap

像正常一样折叠空白，但禁止换行(文本换行)在文本中.

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

这篇关于如何阻止 em 破折号自行包装?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！