如何阻止自行包袱的破折號？

我有一個標題。在標題的最後一個單詞的末尾是一個em短劃線（在單詞和短劃線之間沒有空格）。如何阻止自行包袱的破折號？

當瀏覽器窗口變得更小時，破折號會打破並進入新行。在自己的路線上有一個衝擊是不好的排版。

如何在短劃線之前停止折線（以便最後一個單詞在新線上運行）？

下面是代碼：

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

我已經試過包裝的最後一個字並在span的破折號與white-space: nowrap;。它適用於我的電腦，但我不明白爲什麼會出現這種情況，因爲沒有空白區域，我擔心它不適用於所有瀏覽器。

我不能使用一個不分斷的連字符，因爲它需要是一個破折號，我不認爲有一個非破壞性的破折號。

感謝

2017-06-23 Markeee

這工作跨瀏覽器：

span { white-space: nowrap }

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

您寫道：

我已經試過包裝的最後一個字並在span與破折號white-space: nowrap;。它適用於我的電腦，但我不明白爲什麼會出現這種情況，因爲沒有空白區域，我擔心它不適用於所有瀏覽器。

你正在過度使用它（或者直接從中獲益）。 white-space屬性的值nowrap可防止文字換行。這就是它的作用。乾淨利落。

從MDN：

nowrap

崩塌空白爲正常，但抑制換行文本內（文字包裝）。

2017-06-23 13:46:04

好偉大謝謝 – Markeee

如果你有在H1標籤，你可以包裝在inline-block的跨度字和破折號的內容完全控制。

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

2017-06-23 13:45:57 WizardCoder

你可以嘗試使用該解決方案here這是自動換行，你不想要打破這樣的：

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

希望對你有用！

2017-06-23 13:48:34 Monkeybruiser

的NOBR標籤不規範，和W3C強烈勸阻。見w3.org/TR/html5/obsolete.html#non-conforming-features – WizardCoder

這是真的@WizardCoder，我只是想給OP其他潛在的解決方案的問題。 – Monkeybruiser

我知道，對問題展示多種解決方案是很好的。我只是認爲，如果他們沒有點擊你的鏈接，那麼人們就會知道使用''的潛在問題。 – WizardCoder

創建一個簡單的類和僞元素來封裝nowrap和符號。現在，您可以將類的跨度元素：

.emdash { 
 
    white-space: nowrap; 
 
} 
 

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

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

2017-06-23 13:52:55

回答