iOS中Safari浏览器select下拉列表文字太长被截断的处理方法

　　网页中的select下拉列表，文字太长的话在iOS的Safari浏览器里会被自动截断，显示成下面这种：

　　安卓版的浏览器则没有这个问题。

　　如何让下拉列表中的文字在iOS的Safari浏览器里显示完整呢？答案是使用<optgroup></optgroup>标签。有关optgroup标签的作用可以查看w3school网站的说明。

　　正常select下拉列表的html是这样：

<select id="sel_model" class="form-control">
<option value="">请选择车型</option>
<option value="5a38a7cae794ff021d4e9eab">2018款 奥迪A3 30周年年型 Sportback 35 TFSI 进取型</option>   <option value="5a38a7cae794ff021d4e9eac">2018款 奥迪A3 30周年年型 Limousine 35 TFSI 进取型</option>   <option value="5a38a7cae794ff021d4e9ead">2018款 奥迪A3 30周年年型 Sportback 35 TFSI 时尚型</option>   <option value="5a38a7cae794ff021d4e9eae">2018款 奥迪A3 30周年年型 Limousine 35 TFSI 时尚型</option>   <option value="5a38a7cae794ff021d4e9eaf">2018款 奥迪A3 30周年年型 Sportback 35 TFSI 运动型</option>
</select>

　　加入optgroup标签之后的html是这样：

<select id="sel_model" class="form-control">
<optgroup>
<option value="">请选择车型</option>
<option value="5a38a7cae794ff021d4e9eab">2018款 奥迪A3 30周年年型 Sportback 35 TFSI 进取型</option>
<option value="5a38a7cae794ff021d4e9eac">2018款 奥迪A3 30周年年型 Limousine 35 TFSI 进取型</option>
<option value="5a38a7cae794ff021d4e9ead">2018款 奥迪A3 30周年年型 Sportback 35 TFSI 时尚型</option>
<option value="5a38a7cae794ff021d4e9eae">2018款 奥迪A3 30周年年型 Limousine 35 TFSI 时尚型</option>
<option value="5a38a7cae794ff021d4e9eaf">2018款 奥迪A3 30周年年型 Sportback 35 TFSI 运动型</option>
</optgroup>
</select>

　　然后iOS的Safari浏览器上显示效果如下：

　　iOS会根据select下拉列表中的内容长度自动缩小字体，以保证所有内容能在一行显示出来。尽管在HTML中加入了optgroup标签，但通过JQuery获取select选中值的方法不受任何影响。例如我们仍然可以通过$('#sel_model').val()来获取下拉列表的选中值。

　　optgroup是一个很神奇的标签！

iOS中Safari浏览器select下拉列表文字太长被截断的处理方法相关推荐

ios中safari浏览器100vh带有滚动条？
问题场景在移动端safari或者chrome浏览器中,使用100vh,会出现滚动条. 根本原因在safari和chrome浏览器中,100vh是指去掉地址栏的高度,所以会出现滚动条. 解决方案移 ...
ios中safari浏览器中window.open()无效的问题
除了sadari以外的浏览器,点击按钮后都会成功开启新页面.而在safari中认为window.open()是一种弹窗,而safari浏览器阻拦弹出式视窗.我这里是在uniapp中处理的方式,其他可自 ...
oracle导入提示字符过长,Oracle 解决【ORA-01704:字符串文字太长】
错误提示:oracle在toad中执行一段sql语句时,出现错误'ORA-01704:字符串文字太长'.如下图: 原因:一般为包含有对CLOB字段的数据操作.如果CLOB字段的内容非常大的时候,会导致 ...
window 使用 Edge/Chrome 调试手机 iOS 的 Safari 浏览器
先上效果图真机 PC Edge window 使用 Edge/Chrome 调试手机 iOS 的 Safari 浏览器 Safari 是苹果配套的浏览器,正常来说如果使用的是 macOS 直接一条 ...
mac系统中Safari浏览器网页如何保存至备忘录Notes?
mac系统中Safari浏览器网页怎么保存至备忘录Notes?在Safari浏览器中如果遇到很好的网站我们可以将它保存到Notes备忘录中,但是具体该怎么操作呢?请看下文详细介绍,需要的朋友可以参考下 ...
ios的Safari浏览器下视频播放问题
ios的Safari浏览器下视频播放问题起因原因: 解决方案: 示例代码起因最近在做手机端接口对接,后端使用java,前端使用vue开发,在提供给前端视频接口时出现了个问题: 视频在安卓上可以 ...
苹果用计算机知道密码,怎么查看苹果系统电脑中safari浏览器内的用户登录密码...
怎么查看苹果系统电脑中safari浏览器内的用户登录密码随着科技的发展,电脑已经成为人们日常生活中必不可少的工具,当我们在使用苹果电脑中的safari浏览器浏览网页时,系统会自动保存账号密码,那么我 ...
解决java web中safari浏览器下载后文件中文乱码问题
解决java web中safari浏览器下载后文件中文乱码问题参考文章: (1)解决java web中safari浏览器下载后文件中文乱码问题 (2)https://www.cnblogs.com/ ...
ios运行html游戏,Html游戏 - IOS的Safari浏览器崩溃
我正在运行一个HTML应用程序开发使用打字稿,pixi.js webgl,网络音频.Html游戏 - IOS的Safari浏览器崩溃游戏在各种设备和浏览器上的windows和android上运行 ...

iOS中Safari浏览器select下拉列表文字太长被截断的处理方法

iOS中Safari浏览器select下拉列表文字太长被截断的处理方法相关推荐

最新文章

热门文章