Html CSS3奇怪的巴哈马边境狩猎iOS和iPad

我在iOS浏览器Safari（不是Safari桌面，不是Chrome桌面，也不是Chrome Mobile）上渲染时遇到了一个非常奇怪的问题

我有一些div，用户可以拖动它们。当用户对内容进行“预览”时，在iOS Safari Mobile中，文本是“包装器”，因为它没有足够的空间来绘制它，类似这样：

.text-perfect-correction {
  border-width: 6px;
  border-color: transparent;
  border-style: dotted;
  padding: 5px;
  margin: -11px;
}

.text-div {
  -webkit-line-break: after-white-space;
  display: inline;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}

同侧文字

---

Lorem Ipsum问题不是iOS特有的，而是你在做有风险的假设

首先，让我们看看你做了什么：

• 给父元素一个精确的472px
• 将字体大小设置为50px
• 将字体族设置为Lato
• 假设您的文本将始终与这些度量值放在一行上

问题在于，不同的渲染引擎不会始终以相同的方式渲染字体，可能存在细微差异，例如，导致iOS上的宽度增加了几个像素。在一个浏览器中将字体大小推到极限，而在另一个浏览器中仅仅假设一切看起来都正常，这是非常危险的。 除此之外，加载Lato可能会出现问题，使浏览器退回到不同的字体，这可能会占用更多的水平空间

我将您的代码复制到了，因为Lato没有导入（也没有在我的计算机上），所以它将以默认的无衬线渲染。在Chrome中，文本可以放在一行中，但在Firefox中，文本也会在ipsum之后断开

解决 有几种方法可以确保文本保持在一行

防止线路中断 您可以使用CSS防止空格换行，这意味着整个文本将被强制换行：

.text-div {
    white-space: nowrap;
}

省略 除上述内容外，您还可以使用省略号（

…

）来切断溢出的文本：

使文本变小

---

当然，你也可以缩小字体大小，这样你就有足够的误差空间来防止在渲染时出现轻微差异的问题。

我知道iOS是一个很难设计的浏览器，但从我可以看出，你的误差空间可能会把你搞砸

class=“text perfect correction”

有

左：594px和
宽度：472px，字体大小为50px，因此根据您在哪个iPhone上查看，可能存在大小/边距问题。用较少的px测试它。这是我个人在iOS上遇到的最大问题





.text-div {
    white-space: nowrap;
}

.text-div p span strong {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
}