如何在 iOS7 上修复 <select> 元素上的截断文本

Posted 2023-05-09

【中文标题】如何在 iOS7 上修复 <select> 元素上的截断文本

【英文标题】：How to fix truncated text on <select> element on iOS7

【发布时间】：2013-10-24 06:09:53

【问题描述】：

在选择 html select 元素上的选项时，有什么方法可以防止 ios7 截断文本？ iOS7 会截断选项文本上的文本而不是换行。在我的具体情况下，这是完全无法使用的：

上面的截图取自一个使用 jQuery Mobile 构建的 html 5 应用程序。我还应该提到这个问题在 iOS6 上不存在。

【问题讨论】：

我认为你不能...

尽可能多地拆分选项。

【参考方案1】：

在选择列表末尾添加一个空的optgroup：

 <select>
  <option selected="" disabled="">Select a value</option>
  <option>Grumpy wizards make toxic brew for the evil Queen and Jack</option>
  <option>Quirky spud boys can jam after zapping five worthy Polysixes</option>
  <option>The wizard quickly jinxed the gnomes before they vaporized</option>
  <option>All questions asked by five watched experts amaze the judge</option>
  <optgroup label=""></optgroup>
 </select>

【讨论】：

它看起来有点像一些肮脏的黑客。但效果很好！

天哪，多么奇怪的黑客行为。但正如其他人所说，它有效，所以耸耸肩。

取自@tmwild Sorry to post this as an answer rather than a comment (new account) but the accepted solution here will currently cause a problem on ios8 devices. Ios8 struggles with optgroups - find the details below... github.com/jquery/jquery-mobile/issues/7848的NAA

仍在 iOS9 上工作（它使用较小的字体大小并在需要时添加换行符）

是的，这是 webapps 的唯一解决方案。对于卑鄙的用户界面来说，这绝对是一种荒谬的破解，但它可以工作并解决许多客户端问题。 iOS 应该简单地自动调整大小和换行。 android，至少 HTC Sense 在现代弹出屏幕中做到了这一点。所以在这个可怕的***事情上。 干杯！

【参考方案2】：

和上面的答案一样，但是使用 JS 为文档中的每个选择添加一个空的 optgroup：

// iOS 7 hack: Add an optgroup to every select in order to avoid truncating the content
if (navigator.userAgent.match(/(iPad|iPhone|iPod touch);.*CPU.*OS 7_\d/i)) 
    var selects = document.querySelectorAll("select");
    for (var i = 0; i < selects.length; i++ )
        selects[i].appendChild(document.createElement("optgroup"));
    

希望这对遇到同样问题的人有用。

【讨论】：

谢谢。这对我来说非常适合 IOS 10（当前最新版本）和下面

不敢相信这个修复在 2021 年 IOS13 上仍然有效/需要。