Safari瀏覽器select下拉清單文字太長不換行的解決方法
- php中世界最好的语言原創
- 2018-03-19 10:14:204840瀏覽
這次帶給大家Safari瀏覽器select下拉清單文字太長不換行的解決方法，解決Safari瀏覽器select下拉清單文字太長不換行的注意事項有哪些，下面就是實戰案例，一起來看一下。
網頁中的select下拉列表，文字太長的話在iOS的Safari瀏覽器裡會被自動截斷，顯示成下面這種：
安卓版的瀏覽器就沒有這個問題。
如何讓下拉清單中的文字在iOS的Safari瀏覽器裡顯示完整呢？答案是使用標籤。有關optgroup標籤的作用可以查看w3school網站的說明。
正常select下拉清單的html是這樣：
请选择车型 2018款 奥迪A3 30周年年型 Sportback 35 TFSI 进取型2018款 奥迪A3 30周年年型 Limousine 35 TFSI 进取型2018款 奥迪A3 30周年年型 Sportback 35 TFSI 时尚型2018款 奥迪A3 30周年年型 Limousine 35 TFSI 时尚型2018款 奥迪A3 30周年年型 Sportback 35 TFSI 运动型
加入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是一個很神奇的標籤！
相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
推薦閱讀：
#以上是Safari瀏覽器select下拉清單文字太長不換行的解決方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：Gulp指令產生精靈圖下一篇：Gulp指令產生精靈圖