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

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

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

Мое решение, если это невозможно, - просто подрезать результат символам 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!

Ответы

Ответ 1

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

Ответ 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;
                }
            });

        }
    });
});