HTML 選択ドロップダウンでオーバーフローするテキストを処理するにはどうすればよいですか?

ドロップダウン ボックス内のオーバーフロー テキストの省略記号

Web 開発の領域では、ドロップダウン ボックス内のオーバーフロー テキストの管理が永続的な問題になる可能性があります。 text-overflow:ellipsis プロパティは、div などの他の要素内のテキストを切り詰めるためによく使用されますが、 に対して実装するには問題がありました。

しかし、2020 年 7 月の時点で、重要な進歩が起こりました。Chrome は

の text-overflow:ellipsis をサポートするようになりました。要素。これは、ブラウザがドロップダウン ボックスの幅を超えるオプション テキストを自動的に切り詰め、テキストが切り取られていることを示す省略記号を追加することを意味します。

代替ソリューション

この最近の更新前は、 でテキストを切り詰めるオプションは限られていました。 JavaScript に頼らずに要素を追加できます。回避策の 1 つは、overflow:hidden およびwhite-space:nowrap プロパティを text-overflow:ellipsis と組み合わせて使用​​することでした。残念ながら、このアプローチはすべてのブラウザで一貫して機能しませんでした。

もう 1 つの代替方法は、Chosen などのカスタマイズ可能な置換ライブラリを採用することでした。これらのライブラリは、ネイティブ HTML フォーム コントロールの機能を超えて、特定の要件を満たすためにスタイル設定およびカスタマイズできるドロップダウンを提供します。

今後の開発とバグ報告

Chrome は舗装されていますが

でのテキスト オーバーフロー処理を改善する方法他のブラウザがすぐに追従しない可能性があることに注意することが重要です。一貫したサポートがないことが気になる場合は、2 つのオプションがあります。

• それぞれのオペレーティング システムまたはブラウザに対してバグ レポートを提出し、 に対する text-overflow:ellipsis の採用を主張します。
  Chosen のようなカスタマイズ可能な置換ライブラリを選択すると、ドロップダウン ボックスの外観をより柔軟に制御できます。

  意識を高め、代替ソリューションを模索し続けることで、 Web フォームのデザインの進歩に貢献し、すべての人にとってよりシームレスなユーザー エクスペリエンスを保証します。

  以上がHTML 選択ドロップダウンでオーバーフローするテキストを処理するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

  ソース：php.cn
  前の記事：Web ページに垂直スクロールバーを永続的に表示するにはどうすればよいですか? 次の記事：`h3:nth-child(1):contains(\'a\')` が機能しない理由と代替手段は何ですか?
  このウェブサイトの声明

  この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
  著者別の最新記事

  • JavaScript ではなぜ即時呼び出し関数式 (IIFE) を 1 行で定義して呼び出す必要があるのでしょうか?
    2024-12-04 15:29:15
  • データとストップワードが不十分なため、MySQL 全文検索が失敗するのはなぜですか?
    2024-12-04 15:28:12
  • wkhtmltopdf を使用して PDF に変換するときに、HTML テーブル内の改ページを防ぐにはどうすればよいですか?
    2024-12-04 15:27:11
  • StringTokenizer は本当に Java で非推奨になっているのでしょうか?
    2024-12-04 15:26:11
  • Python MySQL データベースの更新が反映されないのはなぜですか?
    2024-12-04 15:25:15
  • 長いテキストが HTML のコンテナからオーバーフローしないようにするにはどうすればよいですか?
    2024-12-04 15:24:11
  • 単一のクエリで MySQL テーブルに複数の行を挿入するにはどうすればよいですか?
    2024-12-04 15:23:12
  • 大きなファイル (3 GB 以上) を FastAPI バックエンドに効果的にアップロードするにはどうすればよいですか?
    2024-12-04 15:22:11
  • Selenium の非推奨の `executable_path` を Python で修正するにはどうすればよいですか?
    2024-12-04 15:21:16
  • pysftp または Paramiko を使用するときに SSH ホスト キーを適切に検証するにはどうすればよいですか?
    2024-12-04 15:20:12
  最新の問題

  function_exists() はカスタム関数を決定できません Function test () {return true;} if (function_exists ('test')) {echo "テストは関数です";

  から 2024-04-29 11:01:01

  0

  3

  2076

  Google Chromeのモバイル版を表示する方法 こんにちは、先生、Google Chrome をモバイル版に変更するにはどうすればよいですか?

  から 2024-04-23 00:22:19

  0

  11

  2238

  子ウィンドウは親ウィンドウを操作しますが、出力は応答しません。 最初の 2 つの文は実行可能ですが、最後の文は実装できません。

  から 2024-04-19 15:37:47

  0

  1

  1883

  親ウィンドウには出力がありません document.onclick = function(){ window.opener.document.write('私は子ウィンドウの出力です');

  から 2024-04-18 23:52:34

  0

  1

  1765

  CSS マインド マッピングに関するコースウェアはどこにありますか? コースウェア

  から 2024-04-16 10:10:18

  0

  0

  1799
  関連トピック

  詳細>

  • Wi-Fiパスワード
  • mysql例外の解決策
  • BTCコイン最新ニュース
  • nginxの設定を詳しく解説
  • phpstudyが開けない原因
  • readyfor4gb
  • ファイル名に違法なコンテンツが含まれています
  • モバイルハードディスクパーティションソフトウェア
  人気のおすすめ

  • 表示楕円を超えるようにCSSを設定する方法
  • CSSでフォントサイズを設定する方法
  • CSSでホバーを使う方法
  • CSSで文字間隔を設定する方法
  • css3の新機能とは何ですか？

  人気のチュートリアル

  詳細>

  関連するチュートリアル

  人気のおすすめ

  最新のコース

  • 
    最新の ThinkPHP 5.1 ワールドプレミアビデオチュートリアル (PHP エキスパートになるための 60 日間のオンライン トレーニング コース)

    1421767
  • 
    PHP 入門チュートリアル 1: 1 週間で PHP を学ぶ

    4266170
  • 
    JAVA 初心者向けビデオチュートリアル

    2520118
  • 
    Little Turtle のゼロベースの Python 学習入門ビデオ チュートリアル

    506601
  • 
    PHP ゼロベースの入門チュートリアル

    861661

  • 
    最新の ThinkPHP 5.1 ワールドプレミアビデオチュートリアル (PHP エキスパートになるための 60 日間のオンライン トレーニング コース)

    1421767 回の学習
  • 
    JAVA 初心者向けビデオチュートリアル

    2520118 回の学習
  • 
    Little Turtle のゼロベースの Python 学習入門ビデオ チュートリアル

    506601 回の学習
  • 
    Web フロントエンド開発の簡単な紹介

    215671 回の学習
  • 
    PSビデオチュートリアルをゼロからマスターする

    887111 回の学習

  • 
    [Web フロントエンド] Node.js クイック スタート

    7281 回の学習
  • 
    海外のWeb開発フルスタックコースの完全なコレクション

    5677 回の学習
  • 
    Go言語実践GraphQL

    4771 回の学習
  • 
    550W ファンマスターが JavaScript をゼロから段階的に学習します

    679 回の学習
  • 
    Python マスター Mosh、基礎知識ゼロの初心者でも 6 時間で始められる

    24076 回の学習

  最新のダウンロード

  詳細>

  ウェブエフェクト

  公式サイト

  サイト素材

  フロントエンドテンプレート

  • [フォームボタン] jQuery エンタープライズ メッセージ フォームの連絡先コード
  • [プレイヤーの特殊効果] HTML5 MP3 オルゴール再生効果
  • [メニューナビゲーション] HTML5 クールなパーティクル アニメーション ナビゲーション メニューの特殊効果
  • [フォームボタン] jQuery ビジュアル フォームのドラッグ アンド ドロップ編集コード
  • [プレイヤーの特殊効果] VUE.JS 模倣 Kugou 音楽プレーヤー コード
  • [html5特殊効果] 古典的な HTML5 プッシュ ボックス ゲーム
  • [画像の特殊効果] 画像効果を追加または削減するための jQuery スクロール
  • [フォトアルバム効果] CSS3 個人アルバム カバー ホバー ズーム効果

  • [フロントエンドテンプレート] 室内装飾クリーニングおよび修理サービス会社のウェブサイトのテンプレート
  • [フロントエンドテンプレート] フレッシュカラーの個人履歴書ガイドページテンプレート
  • [フロントエンドテンプレート] デザイナーのクリエイティブな仕事の履歴書 Web テンプレート
  • [フロントエンドテンプレート] 現代のエンジニアリング建設会社のウェブサイトのテンプレート
  • [フロントエンドテンプレート] 教育サービス機関向けのレスポンシブ HTML5 テンプレート
  • [フロントエンドテンプレート] オンライン電子書籍ストア モールのウェブサイト テンプレート
  • [フロントエンドテンプレート] IT テクノロジーがインターネット企業の Web サイト テンプレートを解決します
  • [フロントエンドテンプレート] パープルスタイル外国為替取引サービスウェブサイトテンプレート

  • [PNG素材] かわいい夏の要素のベクター素材 (EPS+PNG)
  • [PNG素材] 4 つの赤い 2023 卒業バッジ ベクター素材 (AI+EPS+PNG)
  • [バナー画像] 歌う鳥と花がいっぱいのカートデザイン春のバナーベクター素材（AI+EPS）
  • [PNG素材] 金色の卒業帽ベクター素材（EPS+PNG）
  • [PNG素材] 黒と白のスタイルの山アイコン ベクター素材 (EPS+PNG)
  • [PNG素材] 異なる色のマントと異なるポーズを持つスーパーヒーローのシルエットベクター素材（EPS+PNG）
  • [バナー画像] フラット スタイルの植樹祭バナー ベクター素材 (AI+EPS)
  • [PNG素材] 9つのコミックスタイルの爆発するチャットバブルベクター素材（EPS+PNG）

  • [フロントエンドテンプレート] 室内装飾クリーニングおよび修理サービス会社のウェブサイトのテンプレート
  • [フロントエンドテンプレート] フレッシュカラーの個人履歴書ガイドページテンプレート
  • [フロントエンドテンプレート] デザイナーのクリエイティブな仕事の履歴書 Web テンプレート
  • [フロントエンドテンプレート] 現代のエンジニアリング建設会社のウェブサイトのテンプレート
  • [フロントエンドテンプレート] 教育サービス機関向けのレスポンシブ HTML5 テンプレート
  • [フロントエンドテンプレート] オンライン電子書籍ストア モールのウェブサイト テンプレート
  • [フロントエンドテンプレート] IT テクノロジーがインターネット企業の Web サイト テンプレートを解決します
  • [フロントエンドテンプレート] パープルスタイル外国為替取引サービスウェブサイトテンプレート
  

  福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！

  私たちについて 免責事項 Sitemap

  © php.cn All rights reserved