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 サイトの他の関連記事を参照してください。

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

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

  • 8bitdo＆＃039;の最高のAndroidコントローラーを今日わずか40ドルで入手してください（20％オフ）
    2025-03-22 03:08:08
  • Lenovo Yoga Slim 9i 14 Gen 10ラップトップレビュー：迅速な処理、他の場所に欠けている
    2025-03-22 03:07:09
  • Google Pixel電話で長い露出の写真を撮る方法
    2025-03-22 03:06:10
  • d3dx11_42.dllを修正する方法Windowsで見つかりませんか？ここでは最高の方法
    2025-03-22 03:05:08
  • 私がアップルファミリーの共有を使用しない簡単な理由（どんなに良いです）
    2025-03-22 03:04:09
  • 今日のウェブのためにExcelでできる5つのことは、あなたが12か月前にできないことをできません
    2025-03-22 03:03:09
  • 決定的なガイド：PBIでの作業に巻き込まれたファイルリカバリ
    2025-03-22 03:02:08
  • 私が自分の人生を整理する方法を変えた8つの無料のiPhoneアプリ
    2025-03-22 03:01:08
  • Warframe：Best Sporothrixビルド
    2025-03-22 02:47:15
  • マインドオーバーマジック：アンダースクールの完全なガイド
    2025-03-22 02:39:15
  最新の問題

  • ブラウザキャッシングを使用して、CSSの読み込み時間を改善しますか？
    2025-03-21 18:33:05
  • BEM、OOCSS、およびSMACSSの重要な違いは何ですか？
    2025-03-21 12:31:29
  • CSSコードをどのように文書化しますか？
    2025-03-21 12:30:34
  • 一般的なCSSアンチパターンは何ですか？
    2025-03-21 12:29:30
  • 潜在的な問題を識別するために、CSSリントツールをどのように使用しますか？
    2025-03-21 12:28:30
  関連トピック

  詳細>

  • CLI コマンドの概要
  • サーバー評価用ソフトウェア
  • イバティスとマイバティスの違いは何ですか
  • Douyin で同じ都市機能を有効にする方法
  • ドメイン名エラー修正システムとは何ですか?
  • 残りの API と API の違い
  • Xiaomiコンピュータのデータ復旧方法
  • マウスが動かなくなったらどうすればいいですか?
  • XPでポート445を閉じる方法
  人気のおすすめ

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

  人気のチュートリアル

  詳細>

  関連するチュートリアル

  人気のおすすめ

  最新のコース

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

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

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

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

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

    878998

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

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

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

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

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

    924129 回の学習

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

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

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

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

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

    33161 回の学習

  最新のダウンロード

  詳細>

  ウェブエフェクト

  公式サイト

  サイト素材

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

  • [フォームボタン] 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