如何防止链接的电话号码在 iOS 上断线？答案

【问题标题】：How to keep linked phone number from breaking line on iOS?如何防止链接的电话号码在 iOS 上断线？
【发布时间】：2014-01-25 10:46:21
【问题描述】：

我正在开发a website，它被设置为响应式设计，可以根据屏幕大小优雅地转换。

使用 iOS，我注意到每当我在幻灯片元素下方显示的摘录中显示公司电话号码时，iOS 自动插入的锚标记会在显示电话号码之前导致换行。 See this screenshot for detail。

抱歉，我没有渲染源代码来显示这一点，因为 iOS 不会通过任何类型的“查看源”功能公开它。如果有办法在 iOS 上显示我的源代码，请告诉我。

我确实有 预渲染 CSS，它根据屏幕大小触发中断和上面的文本之间的正确行距，但很难在行之间找到平衡间距和定位。这是代码：

首先，对于“正常”屏幕：

.content .genesis_responsive_slider .slide-excerpt {
    background-color: #222;
    filter: alpha(opacity=0);
    height: 8%;
    width: 100%;
    margin: 0;
    padding: 0px 0px 0px 4%;
}

“移动”屏幕的下一个 480 像素宽：

@media only screen and (max-width: 480px) {

     .content #genesis-responsive-slider .slide-excerpt {
         font-size:inherit;
         height: 24%;
         padding:4% 0 0 0;
         line-height: .5rem;
     }

}

有没有办法防止在 iOS 小屏幕上出现锚文本换行符？

【问题讨论】：

你不应该需要查看源代码，当然你可以捕获这个服务器端或使用另一个浏览器，对吧？我的意思是，你喜欢那里的网站。 :)

标签： ios iphone css hyperlink line-breaks

【解决方案1】：

我刚刚在我正在进行的项目中遇到了同样的问题。我找到了为我解决了这个问题的答案：https://stackoverflow.com/a/4056764/1778696

你要做的就是把这个添加到头部

<meta name="format-detection" content="telephone=no">

然后将其添加到您的电话号码中，以使其作为电话号码可点击

<a href="tel:123-456-7890">123-456-7890</a>

【讨论】：