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

Question

在html select元素上选择选项时，有没有办法阻止iOS7截断文本？ iOS7截断选项文本上的文本而不是包装它。在我的具体情况下，这是完全无法使用的：

上面的截图来自使用jQuery Mobile构建的html 5应用程序。我还要提一下，iOS6上没有这个问题。

Answer 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>

Answer 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"));
    }
}

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