Question

我的asp.net页面上的下拉列表中有足够长的文本。它违反了UI边界，超出了分配的UI区域。

无论如何我可以使用CSS或javascript来包装[不修剪]吗？无论多长时间，我都必须显示整个字符串。

Answer 1

更长的答案：是的。

您可以使用not default元素，但可以使用JavaScript和CSS制作自己的元素。您的自定义droplist元素应包含少量div（或其他HTML元素）作为droplist项。当您将固定宽度设置为droplist的单元格时，文本将包含在内部。

一个示例is here（刚刚从google中查询了第一个链接："JavaScript dropdown"）。

Answer 2

简短回答：不。

更长的答案：用户使用广播组而不是选择菜单。您可以使用CSS overflow属性添加滚动。

Answer 3

如果你想保留原生选择框的UI表示，你可以采用（相当讨厌的）方式。它是相当手动的，我不会一般地推荐它，但它可以达到你想要的效果：

对于列表中的每个选项，根据该选项文本中的字符计算“宽度”。这应该是比例字体字符宽度的模糊表示（例如，ijtl = 1，aopg = 2，m = 2.5，粗略地说，那种事情）。

任何超过某个值的东西（根据您的可用UI空间估计这个）都会在适当的位置（一个空格或一个长字连字符分开） - 需要编写一个算法来执行此操作。重复，直到没有超过所需大小的块。你应该每个选项最终得到一个数组（有些只有长度为1，如果已经足够短的话）。

对于匹配数组大于1的每个选项，在包含每个后续文本块的原始数据之后插入选项节点。给他们一个特定的类（例如long-child），并且与原始类相同。您可能还应该给出一些视觉指示，表明它是前一项的延续。

为select提供onchange事件处理程序，该处理程序检查所选选项是否具有long-child类。如果是这样，它应搜索前面的选项以查找具有相同值的第一个选项，并且不具有long-child类。将selectedIndex设置为该选项。

像我说的那样令人讨厌，但可以达到你想要的效果。它甚至可能比Pawka建议你自己推出更少的代码;）

Answer 4

我认为现在是时候考虑一个不同的界面，而不是简单的下拉。

但如果必须，我会使用一些css / javascript来使用列表元素重新创建下拉窗口小部件。

Answer 5

来自Coldfusion网站的一个例子，我需要一个可供选择的标题列表，长度最多为200个字符。如果文本字符串太长，则选择选项从查询循环并以完整的字点划分，两个字符串都获得相同的选项值。字符模式附加到第二个字符串，在本例中为“_ _”。使用js在选择的文本中查找模式。如果发现pattern，则将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

     <!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>

Answer 7

我一直在回答这样的老问题。这是一个常见问题，即使自2009年以来也没有真正解决过:)。我前段时间写了这篇文章，你可能会觉得有帮助：http://dpatrickcaldwell.blogspot.com/2011/06/giantdropdown-jquery-plugin-for-styling.html

这是一个jquery插件，可以创建一个由隐藏的select元素支持的可样式无序列表。

源代码位于github：https://github.com/tncbbthositg/GiantDropdown

您将能够处理UL上无法使用SELECT的行为和样式。其他所有内容都应该是相同的，因为选择列表仍然存在，它只是隐藏，但UL会将其用作后备数据存储（如果可以的话）。

在下拉列表中包装长文本？

7 个答案: