web-dev-qa-db-ja.com

HTML選択ドロップダウンの幅が大きすぎます

問題の解決策を検索しましたが、解決策が見つかりません。おそらく私の母国語ではないため、英語でこれを検索する方法がわかりません。

とにかく、私の問題は、HTMLの機能を使用しようとしていることです。オプションの1つが非常に大きく、スタイルとして幅を渡さないでそのままにしておくと、Webサイト全体が破壊されます。幅を使用する場合、それはからのみ表示され、カットのように見えます。しかし、私は喜んで使用する "..."が含まれている例を見ましたが、その方法がわかりません。

明確にするために、「ロングオプション...」のように見せるための助けを探しています。

jqueryhtmlcssselectwidth
13
Sarah McLachlane

サンプルHTML：

<select id="myOptions">
    <option value="1"><span>Item 1</span></option>
    <option value="2">Item 2</option>
    <option value="3">Item 3 which has very very very very very long text</option>
    <option value="4">Item 4</option>
</select>

CSSの例：

select{
    width: 100px;
    text-overflow: Ellipsis;
}

[〜＃〜] demo [〜＃〜] -選択した値にのみ...を追加

幅を状況に最も適したものに変更します。 text-overflow: Ellipsisを適用すると、指定した幅より長いテキストに...が追加されます。

このスタイルはonlyが選択した値に適用されますが、ドロップダウンをクリックしてもオプションは完全に表示されます。

25
Nope

あなたが説明したような（非常に簡単な）非常にシンプルなソリューションを探しているなら、次のようなものがうまくいくはずです：-

$(document).ready(function() {
    var maxLength = 15;
    $('#example > option').text(function(i, text) {
        if (text.length > maxLength) {
            return text.substr(0, maxLength) + '...';
        }
    });
});

これは単に各optionをループして、そのテキストの長さをチェックします。 maxLengthより大きい場合は、maxLengthと同じ長さに短縮され、...が追加されます。

以下は、それに伴うマークアップの例です。

<select id="example">
    <option value="1">Short</option>
    <option value="2">Oh dear, this option has really long text :(</option>
</select>

これがフィドルです

9
billyonecan

select要素に幅を設定した場合、たとえば、.

select { width: 7em }

ドロップダウンリストはそのままの幅で表示されます。

一部のオプションがvery longの場合は、とにかく使いやすさに問題があるため、短くするか、ラジオボタンやチェックボックスのセットなどの別のコントロールを使用することを検討してください。

3
Jukka K. Korpela

あなたはjQueryを使ってこれを解決し、 this 記事を読むことができます。

var el;

$("select")
  .each(function() {
    el = $(this);
    el.data("origWidth", el.outerWidth()) // IE 8 can haz padding
  })
  .mouseenter(function(){
    $(this).css("width", "auto");
  })
  .bind("blur change", function(){
    el = $(this);
    el.css("width", el.data("origWidth"));
  });
3
Burimi

これは、selectにオプションを追加する方法によって異なります。PHP/ Pythonなどのサーバー側言語で生成されますか？またはそれはいくつかのJSまたはその静的HTMLですか？

これらの言語を使用して、文字列を短くすることができます（最後に...を付けます）。ここではjsでそれを行う方法を見つけることができます： javascriptは単語をカットせずに文字列を短くする

あなたがより具体的でいくつかのコードを示しているなら、私はあなたがあなたの特定のケースでこれを達成するのを助けることができます。

1
ddinchev

Cssのみを使用して選択メニューを変更/変更することはできません。 jqueryを使用して小さなデモを追加し、ソリューションの問題をシミュレートしました。

[Truncating or showing ellipses for Long option value][1]


  [1]: http://jsfiddle.net/xpvt214o/996293/
0
Mayank Nimje