21

問題の修正を検索しましたが、見つかりません。英語が私の母国語ではないため、これを検索する方法がわからない可能性があります。

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

明確にするために、私は自分を「ロングオプション...」のように見せるための助けを探しています。または誰かがより良い方法を知っている場合は？

4

6 に答える 6

33

サンプル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;
}

デモ-選択した値にのみ...を追加

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

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

于 2012-09-11T14:56:09.820 に答える
10

あなたが説明したような非常に単純な解決策を探しているなら（追加...）、このようなものがあなたのために働くはずです：-

$(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>

これがフィドルです

于 2012-09-11T14:11:52.293 に答える
3

jQueryを使用してこの記事を読むことで、これを解決できます。

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"));
  });
于 2012-09-11T13:57:44.123 に答える
3

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

select { width: 7em }

ドロップダウンリストは引き続き自然な幅で表示されます。

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

于 2012-09-11T14:50:31.073 に答える
1

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

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

あなたがより具体的で、いくつかのコードを示しているなら、私はあなたがあなたの特定の場合にこれを達成するのを手伝うことができます。

于 2012-09-11T13:56:55.937 に答える
-1

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

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


  [1]: http://jsfiddle.net/xpvt214o/996293/
于 2018-12-13T10:38:50.343 に答える