Question

我在iOS浏览器Safari上有一个非常奇怪的问题（不是Safari桌面，不是Chrome桌面而不是Chrome Mobile）。

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

Lorem Ipsum Text

Lorem Ipsum ＆lt; - 问题突破线边界没有足够的空间。

文本

div：

<div class="text-perfect-correction" style="opacity: 1; font-family: Lato; left: 594px; top: 386px; font-size: 50px; color: rgb(0, 0, 0); width: 472px; height: 103px; position: absolute; display: block;">
        <div style="display:inherit;" class="text-div" spellcheck="false">
            <p>
                <span style="color:#696969"><strong>Lorem ipsum text</strong></span>
            </p>
        </div>
    </div>

css类是这样的：

.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;
}

我使用完美修正课，因为当您单击 div 和 border 时，我会显示一些按钮，以向用户显示 div 被选中。

在所有其他浏览器中，我看到的都是正确的：

Lorem impsum text Lorem impsum text ＆lt; - No break line

有任何问题吗？

谢谢！

Answer 1

问题不在于iOS特定 - 您正在做出冒险的假设。

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

为父元素提供精确的472px
将字体大小设置为50px
将font-family设置为Lato
假设您的文字将始终与这些measuremenets一行适合

问题是不同的渲染引擎不会总是以相同的方式渲染字体，可能会有轻微的差异，例如：导致iOS上的几个像素更宽。在一个浏览器中将字体大小推到极限，并假设一切在其他浏览器中看起来不错是非常危险的。最重要的是，加载Lato可能会出现问题，使浏览器回退到不同的字体，这可能会占用更多的水平空间。

我将您的代码复制到JSFiddle，并且因为Lato未导入（而不是我的计算机），所以它将以默认的sans-serif呈现。在Chrome中，文字适合一行，但在Firefox上它也会在 ipsum 之后中断。

解决方案

有一些方法可以确保您的文字保持在一行。

防止换行

您可以使用CSS来阻止包装空格，这意味着整个文本将被强制为一行：

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

JSFiddle

省略号

除了上述内容，您还可以使用省略号（...）切断溢出的文本：

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

JSFiddle

缩小文字

当然，您也可以减少字体大小，因此您有足够的误差范围以防止渲染中存在轻微差异的问题。

Answer 2

嗯，我知道iOS是一个难以设计的浏览器，但从我可以告诉你的边缘可能会搞砸你。 class="text-perfect-correction"有left: 594px;和width: 472px;，字体大小为50px，因此根据您正在查看的iPhone，可能存在尺寸/边距问题。用较少的px测试它。这是我个人最喜欢iOS的问题。

<小时/> idev101.com
iPhone Design tips

CSS3奇怪的行为边界Safari iOS和iPad

2 个答案:

解决方案

防止换行

省略号

缩小文字