Safariブラウザの選択ドロップダウンリストのテキストが長すぎて折り返されない問題の解決策

今回は、Safariブラウザの選択ドロップダウンリストのテキストが長すぎて折り返されない問題の解決策をお届けします。 Safariの選択ドロップダウンリストのテキストが表示されるときに注意することは何ですか?ダウンリストが長すぎて折り返されません。次に、実際のケースを見てみましょう。 Web ページの選択ドロップダウン リストのテキストが長すぎる場合、iOS Safari ブラウザでは自動的に切り詰められ、次のように表示されます:

Android バージョンのブラウザにはこれがありません。問題。

iOS Safari ブラウザでドロップダウン リストのテキストを完全に表示するにはどうすればよいですか?答えは、 タグを使用することです。 optgroup タグの役割については、w3school Web サイトの説明を参照してください。

通常の選択ドロップダウンリストの 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 は、選択したドロップダウン リストに基づいて、コンテンツの長さが自動的にフォント サイズを縮小し、すべてのコンテンツが 1 行に収まるようにします。 optgroup タグは HTML に追加されますが、JQuery

を介して select 値を取得する方法には何の影響もありません。たとえば、$('#sel_model').val() を通じてドロップダウン リストの選択された値を取得できます。

optgroup は魔法のタグです!

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

JSで順序なしリスト属性を操作する方法

CSSスタイルの初期化について詳しく説明します

ボタンとフォームの入力の違い

以上がSafariブラウザの選択ドロップダウンリストのテキストが長すぎて折り返されない問題の解決策の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。