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

  • 时间:
  • 浏览:0
  • 来源:幸运快3_快3平台代理_幸运快3平台代理

  网页中的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 300周年年型 Sportback 35 TFSI 进取型</option>

<
option value="5a38a7cae794ff021d4e9eac">2018款 奥迪A3 300周年年型 Limousine 35 TFSI 进取型</option>

<
option value="5a38a7cae794ff021d4e9ead">2018款 奥迪A3 300周年年型 Sportback 35 TFSI 时尚型</option>

<
option value="5a38a7cae794ff021d4e9eae">2018款 奥迪A3 300周年年型 Limousine 35 TFSI 时尚型</option>

<
option value="5a38a7cae794ff021d4e9eaf">2018款 奥迪A3 300周年年型 Sportback 35 TFSI 运动型</option> </select>

  加入optgroup标签以前的html是以前:

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

  已经 iOS的Safari浏览器上显示效果如下:

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

  optgroup是有俩个很神奇的标签!

猜你喜欢

Xbox老大:主机失去意义,串流可服务20亿玩家

从几年前现在开使,就因为着越来越人论断“下一代主机将是最后一代主机,因为着串流技术和云技术因为着让主机硬件拖累意义”,现在随着现实的技术越来越接近你这一想法,或许你这一未来离亲

2020-01-25

英倡组“欧洲海军”保卫波斯湾

图:伊朗舰队19日包围英国油轮美联社【大公报讯】据法新社及彭博社报道:伊朗19日扣押一艘英国油轮,以报复英国海军月初在直布罗陀扣押伊朗油船,大幅加剧了区域紧张局势。英国22日表

2020-01-25

世界上最小的磁体诞生:IBM实现在单原子上存储位数据

别问我当当让我们儿与否愿意幻想过愿意的场景:有朝一日当当让我们儿要能将iTunes曲库中的35000万首歌曲存储在一张非要信用卡大小的设备当中。尽管愿意的理想很美好,然而目前的

2020-01-25

鲁大师2018假机排行榜公布三星苹果很受伤

【TechWeb】伴随着线上购物的日趋便利,如今购买智能手机时候很容易的对假货进行有效的控制。然而,在其他三四线城市,假货手机依旧在路边小店中抢占着正版机型的市场。近期,鲁大师

2020-01-25

苹果iphone6 plus美版三网通杀仅售4900

【IT168 上海行情】苹果564 机苹果564 机6Plus给人的第一感觉可是大,它正面配备一块5.5英寸屏幕,手机整体尺寸即便在Android手机中也是算得上的大屏了。

2020-01-25