Html 为什么Safari会将某些短语分成几行？

备选问题名称：为什么Safari认为源代码Sans Pro中的“李约瑟线”应该被特别对待

说明：
我正在制作一个网站，出于某种原因，macOS Mojave 10.14.6上的Safari 13.0.4决定“李约瑟线”必须有一个断线。无论文本在div中的什么位置，也不管使用什么屏幕宽度。此外，更改“李约瑟线”或“李约瑟线”或“李约瑟L”等词完全解决了这个问题

除了源代码Sans-Pro之外，这个问题似乎不会出现在其他字体上，我无法在Chrome或Firefox上复制它

以下是显示问题的屏幕截图：

标准视图

小宽度

之后没有

如前所述，更改字体或文本本身不会导致出现此问题

使用Helvetica代替源SAN Pro

Alt文本1

Alt文本2

最后，为了触发bug，位置在哪里似乎并不重要

各部门的不同立场

为了提供一个完整的Reprex，我通常会将整个代码粘贴到这里，但是这里有JavaScript依赖项，所以我将所有内容都放在了JSFIDLE中（虽然这是一个简化的示例，所以请原谅代码质量问题）。请注意，此MCVE的负载类型应为“无包裹-车身底部”

原始HTML如下-我复制粘贴了其他行，更改了文本，在文本编码之间切换，等等，这些似乎都没有效果

      <div class="toc_subdiv_line"><div class="toc_subdiv_hd"><a href="#sub3">MBTA Commuter Rail</a></div>
            <div class="toc_lineblock"><div class="toc_lineblock_img" id="lbi_mbta_newrock"></div> • <a href="#line_mbta_newrock">Newburyport/Rockport Line</a></div>
            <div class="toc_lineblock"><div class="toc_lineblock_img" id="lbi_mbta_haver"></div> • <a href="#line_mbta_haver">Haverhill Line</a></div>
            <div class="toc_lineblock"><div class="toc_lineblock_img" id="lbi_mbta_lowell"></div> • <a href="#line_mbta_lowell">Lowell Line</a></div>
            <div class="toc_lineblock"><div class="toc_lineblock_img" id="lbi_mbta_fitch"></div> • <a href="#line_mbta_fitch">Fitchburg Line</a></div>
            <div class="toc_lineblock"><div class="toc_lineblock_img" id="lbi_mbta_wor"></div> • <a href="#line_mbta_wor">Framingham/Worcester Line</a></div>
            <div class="toc_lineblock"><div class="toc_lineblock_img" id="lbi_mbta_need"></div> • <a href="#line_mbta_need">Needham Line</a></div>
            <div class="toc_lineblock"><div class="toc_lineblock_img" id="lbi_mbta_fair"></div> • <a href="#line_mbta_fair">Fairmount Line</a></div>
            <div class="toc_lineblock"><div class="toc_lineblock_img" id="lbi_mbta_frank"></div> • <a href="#line_mbta_frank">Franklin Line</a></div>
            <div class="toc_lineblock"><div class="toc_lineblock_img" id="lbi_mbta_provstough"></div> • <a href="#line_mbta_provstough">Providence/Stoughton Line</a></div>
            <div class="toc_lineblock"><div class="toc_lineblock_img" id="lbi_mbta_midlake"></div> • <a href="#line_mbta_midlake">Middleborough/Lakeville Line</a></div>
            <div class="toc_lineblock"><div class="toc_lineblock_img" id="lbi_mbta_kingply"></div> • <a href="#line_mbta_kingply">Kingston/Plymouth Line</a></div>
            <div class="toc_lineblock"><div class="toc_lineblock_img" id="lbi_mbta_greenbush"></div> • <a href="#line_mbta_greenbush">Greenbush Line</a></div>
       </div>

• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 

我目前的怀疑是，构成“李约瑟线”的字符的字体类型、字体大小和宽度有着令人难以置信的特殊性，这导致了Safari的这种行为。或者，嘿，这可能完全是另一回事

如果有人知道为什么会发生这种行为，如果你能解释一下，我将不胜感激。此外，如果存在除了更改文本内容/使用不间断空格以外的其他解决方法，也将非常感谢

macOS Mojave上的Safari 13.0.4 10.14.6

---

编辑：在iOS上测试。我最担心的事情发生了——这个问题可以在mobile Safari（iOS 13.2.3）上完美复制。根据定义，这意味着几乎所有的iOS浏览器都会出现这个问题。而且它在移动设备上看起来和在桌面上一样不寻常。

我在macOS上的Safari 14.0.1上也看到了这一点（这里是屏幕截图）。将单词的第一个字母更改为任何其他字符可防止问题发生。一件特别奇怪的事情是，当文本在两行之间断开时，高亮显示会使第二行中的文本在第一行中出现重复

---

这不是一个特别令人满意的解决方案，但是添加了

空白：nowrap解决了我的问题。
我在macOS上的Safari 14.0.1中也看到了这一点（这里是屏幕截图）。将单词的第一个字母更改为任何其他字符可防止问题发生。一件特别奇怪的事情是，当文本在两行之间断开时，高亮显示会使第二行中的文本在第一行中出现重复

这不是一个特别令人满意的解决方案，但是添加了
空白：nowrap
解决了我的问题。
我从pfamach的回答中得到启发，改变单词的第一个字母可以防止问题发生

显然，你不能仅仅改变第一个字符。您可以做的是在前面添加一个零宽度字符，这可以解决问题，并且根本不会改变文本的外观

虽然仍然很黑，但我认为这是一个比空白更好的解决方案：nowrap

我被pfamach的回答所启发，他说改变单词的第一个字母可以防止问题的发生

显然，你不能仅仅改变第一个字符。您可以做的是在前面添加一个零宽度字符，这可以解决问题，并且根本不会改变文本的外观

---

虽然仍然很黑，但我认为这是一个比空白更好的解决方案：nowrap

我在正在开发的应用程序中发现了类似的行为。我把这个文本放在一个span元素中。如果文本包含以大写字母C或大写字母B结尾的单词，则最后一个单词将被拆分到下一行。这可能是我见过的最奇怪的虫子。我真的怀疑这会得到任何答案，因为这是一个特定浏览器的边缘行为。希望有什么事情发生。但我敢打赌这是一个浏览器错误。@Ernesto事实上，其他人正在经历这种情况，这让人难以置信地松了一口气（因为不仅仅是我）。。。绝望（因为目前还没有解决方案）。在Safari上使用元素时也是如此。不知什么原因，文本在单词“Map”之前有一个换行符，但在单词“Man”（或我尝试过的任何其他类似的三个字母的单词）之前没有。这里的屏幕截图：也许世界“地图”是Webkit绘图引擎的保留/内部变量？我真的不知道还有什么。我在我正在开发的一个应用程序中发现了类似的行为。我把这个文本放在一个span元素中。如果文本包含以大写字母C或大写字母B结尾的单词，则最后一个单词将被拆分到下一行。这可能是我见过的最奇怪的虫子。我真的怀疑这会得到任何答案，因为这是一个特定浏览器的边缘行为。希望有什么事情发生。但我敢打赌这是一个浏览器错误。@Ernesto事实上，其他人正在经历这种情况，这让人难以置信地松了一口气（因为不仅仅是我）。。。和绝望（因为仍然看不到解决方案）。在这里使用元素时也是如此