CSS3 Strange bahaviour border Safari iOS和iPad

Question

我在iOS浏览器Safari上有一个非常奇怪的问题(不是Safari桌面,不是Chrome桌面而不是Chrome Mobile).

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

Lorem Ipsum文本

Lorem Ipsum < - 问题突破线边界没有足够的空间.

文本

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和边框时,我会显示一些按钮,以向用户显示选择了哪个div.

在所有其他浏览器中,我看到所有正确的:

Lorem impsum text Lorem impsum text < - 没有断行

有什么问题吗？

谢谢!!

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

使文字变小

当然,您也可以减少字体大小,因此您有足够的误差范围来防止渲染中的细微差别问题.