Оберните длинный текст в раскрывающемся списке?

Question

У меня есть разборчиво длинный текст в раскрывающемся списке на моей странице asp.net. он нарушает границу пользовательского интерфейса и выходит за пределы выделенной области пользовательского интерфейса.

В любом случае, я могу обернуть [не обрезать] с помощью CSS или javascript? Я должен отобразить всю строку, независимо от того, сколько она времени.

Answer 1

Короткий ответ: Нет

Более длинный ответ: Пользователь Группа селекторных вместо меню выбора. Вы можете использовать свойство CSS overflow, чтобы добавить прокрутку.

Answer 2

Более длинный ответ: да.

Вы можете использовать элемент не по умолчанию, а сделать свой собственный с помощью JavaScript и CSS. Ваш пользовательский элемент droplist должен содержать несколько div (или других элементов HTML) в качестве элементов droplist. Когда вы установите фиксированную ширину на ячейку droplist, текст будет обернут внутри.

Один пример is here (только что взял 1-ю ссылку из запроса в google: "JavaScript dropdown").

Answer 3

Если вы хотите сохранить представление пользовательского интерфейса из поля выбора, то есть (довольно противный) способ сделать это. Это скорее ручной, и я бы не рекомендовал его вообще, но он мог бы достичь того, чего вы хотите:

Для каждой опции в списке вычислить «ширину» на основе символов в тексте этой опции. Это должно быть смутное представление пропорциональных ширин шрифта шрифта (например, ijtl = 1, aopg = 2, m = 2,5, примерно, такого рода вещи).

Все, что имеет значение определенного значения (оценка этого на основе вашего доступного пространства пользовательского интерфейса), разделяется на соответствующую точку (пробел или дефис в длинном слове - нужно написать алгоритм для этого). Повторяйте, пока у вас нет кусков по желаемому размеру. Вы должны получить массив для каждого параметра (некоторые будут только длиной 1, если они уже достаточно коротки).

Для каждой опции с соответствующим массивом длиной более 1 вставьте узлы опций сразу после оригинала, содержащие каждый из последующих фрагментов текста. Дайте им определенный класс (например, long-child) и то же значение, что и оригинал. Вероятно, вы также должны дать некоторый визуальный индикатор, что это продолжение предыдущего элемента.

Поставьте обработчик события onchange для выбора, который проверяет, имеет ли выбранный параметр класс long-child. Если это так, он должен искать предыдущие параметры, чтобы найти первое, которое имеет такое же значение, и не имеют класс long-child. Установите вместо этого значение selectedIndex.

Как я уже сказал, противно, но может достичь желаемого эффекта. Это может быть даже меньше кода, чем предложение Павки о том, чтобы перекатывать свои собственные;)

Answer 4

Я думаю, что пришло время подумать о другом фрагменте интерфейса, а не просто усложнить провал.

Но если вам нужно, я бы использовал некоторый css/javascript, чтобы воссоздать виджет выпадающего списка, используя элементы списка.

Answer 5

Пример из сайта Coldfusion, где мне нужен список заголовков для выбора, а длина - до 200 символов. Параметры выбора зацикливаются на запросе и разделяются на полную точку слова, если текстовая строка слишком длинная, обе строки получают одинаковое значение параметра. Шаблон символа добавляется ко второй строке, в данном случае «_ _».Используйте js для поиска шаблона в тексте выделения. Если шаблон найден, сбросьте seletectedIndex на -1, поэтому пользователь видит только первую строку текста, если они выбирают вторую.

js: 
function checkSelectedValue(str) 
{ 
var val = str.options[str.selectedIndex].text; 
var indx = str.selectedIndex; 
var patt = /_ _/g; 
var result = patt.test(val); 
if(result){ 
    str.selectedIndex = str.selectedIndex - 1; 
} 
} 

cf: 
<cfselect name="title" id="title" onChange="checkSelectedValue(this);"> 
<option value="">please select a title</option> 
<cfloop query="study"> 
<cfset study.title = trim(study.title) /> 
<cfif len(study.title) lt 110> 
<option value="#study.studyid#">#study.title#</option> 
<cfelse> 
<cfset spacemarker = find(" ", study.title,100) /> 
    <cfset rightchars = len(study.title) - spacemarker /> 
    <cfif spacemarker eq 0> 
    <option value="#study.studyid#">#study.title#</option> 
    <cfelse> 
<cfset str1 = left(study.title,spacemarker) /> 
<cfset str2 = right(study.title,rightchars) /> 
    <option value="#study.studyid#">#str1#</option> 
    <option value="#study.studyid#">&nbsp;&nbsp;_ _ #str2#</option> 
    </cfif> 
</cfif> 
</cfloop> 
</cfselect> 

Answer 6

Я отвечал на старые вопросы, подобные этому. Это общая проблема, которая на самом деле не рассматривалась даже с 2009 года :). Я написал это некоторое время назад, что вам может быть полезно: http://dpatrickcaldwell.blogspot.com/2011/06/giantdropdown-jquery-plugin-for-styling.html

Это плагин jquery для создания неупорядоченного списка, упорядоченного по скрытому элементу.

Источник находится на GitHub: https://github.com/tncbbthositg/GiantDropdown

Вы были бы в состоянии справиться поведения и стили на UL, что вы не можете с SELECT. Все остальное должно быть одинаковым, поскольку список выбора все еще существует, он просто скрыт, но UL будет использовать его в качестве хранилища данных поддержки (если хотите).

Answer 7

 <!DOCTYPE html> 
    <html> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
    <title>Complainse Enteprrise Platform</title> 
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> 
    <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script> 



    <style> 
    .widget{ 
    word-wrap: break-word; 
    text-align: left; 
    display: block; 
    cursor: pointer; 
    } 
    </style> 
    <body> 


    <div id='mask' onclick=" 
    $('#drpDown option').each(function() { 

    if($(this)){ 
    val= $(this).attr('value') ; 
    tex= $(this).html(); 
    $('#dropList').append('<span id='+$(this).val()+'><font>'+tex+'</font></span>'); 
    } 
    }); 

    $('#dropList').children().addClass('widget'); 

    $('#dropList').children().click(function(){ 
    $('#drpDown').val($(this).attr('id')); 

    $('#dropList').hide(); 

    $('#dropList').children().remove(); 
    $('#drpDown').trigger('change'); 
    }); 

    $(function() { 
    $('#dropList').children().each(function(){ 

    $(this).hover(
    function() { 
     $(this).css('background-color', '#0E15D5') 
    }, function() { 
     $(this).css('background-color', '') 
    }); 

    }); 
    }); 

    $('#dropList').show() ; 
    " style='width:200px; height:20px; position: absolute; background:white; 
    filter :alpha (opacity=0);'></div> 

    <select id="drpDown" style="width:50px; " onchange="alert('its changed');"> 
    <option value="1">aaaaa</option> 
    <option value="2">bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</option> 
    <option value="3">ccccccccccc</option> 
    <option value="4">dddd</option> 
    </select> 

    <div id="dropList" style="display:none;width:45px; border:solid black 1px"> 
    </div > 

    <div> 


    </body> 
    </html>