Параметры переноса текста в списке выбора

18

Можно ли переносить длинные параметры в список выбора?

У меня есть динамический список выбора, и некоторые из них довольно длинны. Мне нужны параметры, которые слишком длинны для переноса на следующую строку. Кроме того, я хотел бы отступать от этих строк.

Мое решение, если это невозможно, - это просто обрезать результат до символов n .

Вот что у меня есть:

I'm a short option
This is a really really really long option
This one isn't too bad
But whoa look how long I am! I go on forever!

И вот что я хотел бы иметь:

I'm a short option
This is a really really 
    really long option
This one isn't too bad
But whoa look how long 
    I am! I go on forever!
    
задан hookedonwinter 27.08.2010 в 22:37
источник

2 ответа

12

вы не можете сделать это со стандартным <option> , которое вам нужно будет сделать самостоятельно или найти меню плагин     

ответ дан Scott Evernden 27.08.2010 в 22:40
  • Я нашел этот: github.com/fnagel/jquery-ui/wiki/Selectmenu, который делает то, о чем спрашивал первоначальный вопрос. –  tomcat23 25.03.2011 в 03:04
  • Ссылка в вашем ответе мертва (R.I.P.) –  TheBird956 29.11.2016 в 19:45
  • Ссылка работает для меня (святое воскресение) –  Steve 13.03.2018 в 08:15
2

Вот быстрое и чистое решение jQuery, которое может помочь некоторым. Вне создания собственного выпадающего списка и вытягивания значений / текста из скрытого выбора, как упоминал Скотт Эвернден. Это даст вам возможность поиграть. Он не срезается посредине слова, но в то же время он не обертывает текст. Он поместит полный текст в заголовок, чтобы пользователь мог опрокинуться и увидеть завершенное текстовое слово. Затем он будет использовать параметр maxChar, чтобы перейти к определенному числу символов, а затем найти конец слова, на котором он находится, чтобы не прерывать слово. Минимальная ширина опции должна содержать ее в строке с выбором, но идти вперед и играть с переменной maxChar, и она должна удерживать ее от выхода за пределы. Это короткое временное решение, так как в большинстве случаев я бы выбрал индивидуальное решение, но для быстрых списков, где пользователи могут знать, что они собирают с первым или двумя словами, это отлично работает. Надеюсь, это поможет кому-то:

var optionText, array = [], newString, maxChar = 40;
$('select').each(function(){
    $(this).find('option').each(function(i,e) {
        $(e).attr('title',$(e).text());
        optionText = $(e).text();
        newString = '';
        if (optionText.length > maxChar) {
            array = optionText.split(' ');
            $.each(array,function(ind,ele) { 
                newString += ele+' ';
                if (ind > 0 && newString.length > maxChar) {
                    $(e).text(newString);
                    return false;
                }
            });

        }
    });
});
    
ответ дан Erik Grosskurth 30.03.2016 в 15:31
  • Работал для меня, за исключением атрибута title в элементах опции, который больше не распознается Chrome. –  Mike 05.09.2016 в 22:45
  • @Mike, что мы будем делать в случае Chrome? –  Steve 11.03.2018 в 10:24
  • @Steve Помимо получения плагина выбора jquery, который полностью переписывал бы <select> как нечто совершенно другое (как было предложено в другом ответе), я не думаю, что это можно было бы сделать таким неинвазивным способом, как это ответ. –  Mike 12.03.2018 в 19:10
  • @Mike - я не понимаю, почему атрибут title упоминается в приведенном выше коде. Можно ли переписать код для удаления заголовка? –  Steve 13.03.2018 в 08:18
  • @Steve Просто удалите одну строку, которая устанавливает заголовок. Или просто оставьте его там и для браузеров, которые его поддерживают, он будет работать по назначению. В Chrome разница только в том, что для элементов, которые были усечены, вы не можете получить полный текст, наведя на них курсор мыши. Этот ответ также очень старый, так что может быть, что другие браузеры теперь действуют так же, как Chrome. Понятия не имею. –  Mike 13.03.2018 в 22:07
Показать остальные комментарии