iOS 7 doesn't show more than one line when option is longer than screen size答案

【问题标题】：iOS 7 doesn't show more than one line when option is longer than screen sizeiOS 7 doesn't show more than one line when option is longer than screen size
【发布时间】：2013-09-25 17:59:01
【问题描述】：

iOS 7 在 html options 中不会显示多于一行：

<select>
  <option value="volvo">Volvo test test test test test test </option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

它只是用省略号截断它。有没有其他人通过标准 HTML option 注意到这一点？

也许这是 iOS 7 的错误，因为它没有发生在 iOS6 上？我直接从the w3schools site 中提取了这个。

要重现，请使用运行 iOS 7 的 iPhone 并转到 to this jsFiddle。

显然，您可以在选择后看到问题。但是使用手机优化的手机，您将看不到整个问题。

除非我在这里遗漏了什么。

【问题讨论】：

“一行”是什么意思？ select 元素应该在初始显示中只显示一个选项。如果您的意思是此选项被截断（如何截断？），即使没有使用样式表，请在问题（及其标题）中说明。
好的，我编辑了标题。拿你在上面看到的，或者去 w3 学校看看那里的基本例子。将您的 iOS 7 设备（手机/ipod）保持在纵向模式，然后按下选择按钮。它只显示屏幕空间中允许的内容，其余部分被截断。这也发生在大多数 Android 原生浏览器上，但是......是的，它是 android 原生浏览器。基本上，它应该像在 iOS 6 中一样包装并显示整个句子。

标签： html ios7 option

【解决方案1】：

看起来它现在需要 <optgroup> 标准来包装选项。

问题解决了。

【讨论】：

“需要标准”是什么意思？
它需要一个标签，以便选项显示完整选项的范围超出iPhone的宽度。但这并不能解决android问题。但是在您的选项之后放置一个空的然后将其关闭“”将修复它。因此，如果您有一个选项，您需要使用 optgroup 包装选项，即使它只是一个组。

【解决方案2】：

在选择列表末尾添加一个空的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>

【讨论】：

对于未来的访问者：这对我有用，但确实导致a new issue with multiple items seemingly being selected。