Safari瀏覽器select下拉列表文字太長不換行的解決方法

來源：懂視網責編：小采時間：2020-11-27 19:59:05

Safari瀏覽器select下拉列表文字太長不換行的解決方法

Safari瀏覽器select下拉列表文字太長不換行的解決方法:這次給大家帶來Safari瀏覽器select下拉列表文字太長不換行的解決方法，解決Safari瀏覽器select下拉列表文字太長不換行的注意事項有哪些，下面就是實戰案例，一起來看一下。網頁中的select下拉列表，文字太長的話在iOS的Safari瀏覽器里會被自動截斷，顯

推薦度：

點擊下載本文 文檔為doc格式

導讀Safari瀏覽器select下拉列表文字太長不換行的解決方法:這次給大家帶來Safari瀏覽器select下拉列表文字太長不換行的解決方法，解決Safari瀏覽器select下拉列表文字太長不換行的注意事項有哪些，下面就是實戰案例，一起來看一下。網頁中的select下拉列表，文字太長的話在iOS的Safari瀏覽器里會被自動截斷，顯

這次給大家帶來Safari瀏覽器select下拉列表文字太長不換行的解決方法，解決Safari瀏覽器select下拉列表文字太長不換行的注意事項有哪些，下面就是實戰案例，一起來看一下。

　網頁中的select下拉列表，文字太長的話在iOS的Safari瀏覽器里會被自動截斷，顯示成下面這種：

　　安卓版的瀏覽器則沒有這個問題。

　　如何讓下拉列表中的文字在iOS的Safari瀏覽器里顯示完整呢？答案是使用<optgroup></optgroup>標簽。有關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瀏覽器上顯示效果如下：