为啥 Safari 将某些短语拆分为单独的行？

Posted 2023-02-25

【中文标题】为啥 Safari 将某些短语拆分为单独的行？

【英文标题】：Why does Safari split certain phrases onto separate lines?为什么 Safari 将某些短语拆分为单独的行？

【发布时间】：2019-12-13 03:09:54

【问题描述】：

替代问题名称：为什么 Safari 认为 Source Sans Pro 中的“Needham Line”应该被特殊对待？

说明： 我正在制作一个网站，出于某种原因，macOS Mojave 10.14.6 上的 Safari 13.0.4 已决定“Needham Line”必须有换行符。文本在 div 中的哪个位置无关紧要，使用的屏幕宽度也无关紧要。此外，更改单词“Needhaw Line”或“Needham Lines”或“Needham L”可以完全解决问题。

Source Sans Pro 以外的字体似乎不会出现此问题，我无法在 Chrome 或 Firefox 上复制它。

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

标准视图 较小的宽度 之后没有

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

使用 Helvetica 代替 Source Sans Pro 替代文字 1 替代文字 2

最后，触发错误的位置似乎并不重要。

div 之间的不同位置

为了提供完整的 Reprex，我通常会在此处粘贴整个代码，但是由于存在 javascript 依赖项，因此我将所有内容都放入了 JSFiddle 中（尽管这是一个精简的示例，所以请原谅代码质量）。请注意，此 MCVE 的负载类型应为“No Wrap - Bottom of Body”。

https://jsfiddle.net/Sparen/41e5msjL/4/

原始 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>

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

如果有人对为什么会发生这种行为有任何想法，如果您能解释一下，我将不胜感激。此外，如果除了更改文本内容/使用不间断空格之外还有其他解决方法，也将不胜感激。

macOS Mojave 10.14.6 上的 Safari 13.0.4

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

【问题讨论】：

我在我正在开发的应用程序中发现了类似的行为。我在 span 元素中有这个文本。如果文本包含一些以大写 C 或大写 B 结尾的单词，则最后一个单词将被拆分到下一行。这可能是我见过的最奇怪的错误。我真的怀疑这会得到任何答案，因为特定浏览器的这种边缘行为。让我们希望有什么事情发生。但我敢打赌这是一个浏览器错误。

@Ernesto 其他人正在经历这种情况的事实带来了难以置信的解脱（因为不仅仅是我）......和绝望（因为仍然没有解决方案）。

在 Safari 上使用 元素时相同。由于未知原因，文本在“地图”一词之前有一个换行符，但在“男人”一词（或我尝试过的任何其他类似的三字母词）之前没有。截图在这里：imgur.com/a/wWQV9ev 也许世界“地图”是 Webkit 绘图引擎的保留/内部变量？我真的无法理解其他任何事情。

【参考方案1】：

pfamach 的回答启发了我，即更改单词的第一个字母可以防止问题发生。

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

仍然很老套，但我认为它比white-space: nowrap; 更好。

【讨论】：

我从来没有真正想过使用零宽度字符来解决这个问题。有趣的想法，尽管它可能会引入其他不需要的问题，因为我仍在使用文本编辑器来制作 HTML（并且不想在意外的地方意外复制/粘贴零宽度字符）

【参考方案2】：

我也在 macOS 上的 Safari 14.0.1 中看到了这一点（此处为屏幕截图https://imgur.com/a/E1fd9L8）。将单词的第一个字母更改为任何其他字符可以防止问题发生。一个特别奇怪的事情是，当它被分成两行时突出显示文本会使第二行中的文本在第一行出现重复。

这不是一个特别令人满意的解决方案，但添加 white-space: nowrap; 解决了我的问题。