javascript - 如何在移动浏览器中加载页面时在所选元素中显示长字符串

Question

我正在为移动浏览器开发网页。我有一个选择列表，将显示一个选项，问题是当所选选项有一个长字符串时，默认情况下被 chop ，我想显示全文，因为这些是用户应该回答的问题。我一直在尝试使用 css 增加 select 元素的高度，但文本总是被 chop ，而且我在 Internet 上找不到任何答案我只能找到增加元素长度而不是所选选项。预先感谢您的帮助。

    <select name="select">
      <option value="value1">Value 1</option> 
      <option value="value2" selected>Very long string to show by default</option>
      <option value="value3">Value 3</option>
    </select>

Answer 1

这基本上回答了您的问题:Line Break in HTML Select Option? .您不能在长 <option 之间添加换行符由于浏览器不提供此格式选项，因此所选选项将被 chop ，超出您的移动设备的大小。

尽管这是我为您编写的快速解决方法:jsFiddle .我已经包装了 <select> <div> 内的下拉菜单鉴于 <div>宽度为 300px连同 overflow-x: scroll属性(property)。所选选项现在不会被 chop ，用户将能够水平向左/向右滚动以阅读所选选项的完整文本。