網頁中的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下拉列表文字太长被截断的处理方法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。