4

我在我的 asp.net 页面的下拉列表中有清晰的长文本。它违反了 UI 边界并超出了 UI 的分配区域。

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

4

7 回答 7

3

更长的答案：是的。

您可以不使用默认元素，而是使用 JavaScript 和 CSS 制作自己的元素。您的自定义下拉列表元素应包含几个 div（或其他 HTML 元素）作为下拉列表项。当您将固定宽度设置为下拉列表的单元格时，文本将在里面换行。

一个例子在这里（刚刚从谷歌查询中获取第一个链接：“JavaScript dropdown”）。

于 2009-07-20T10:47:37.850 回答
1

我认为是时候考虑一​​个不同的界面部分，而不是让一个简单的下拉菜单复杂化。

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

于 2009-07-20T15:12:07.923 回答
1

简短的回答：没有。

更长的答案：使用无线电组而不是选择菜单。您可以使用 CSSoverflow属性来添加滚动。

于 2009-07-20T10:39:04.077 回答
1

如果您想保留本机选择框的 UI 表示，有一种（相当讨厌的）方法可以做到。这是相当手动的，我一般不会真正推荐它，但它可以实现你想要的：

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

超过某个值的任何内容（根据您的可用 UI 空间估计）都会在适当的点（空格或连字符长词 - 需要编写算法来执行此操作）进行拆分。重复直到没有超过所需大小的块。您应该以每个选项结束一个数组（如果已经足够短，有些将只有长度 1）。

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

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

就像我说的，讨厌，但可以达到你想要的效果。它甚至可能比 Pawka 自己滚动的建议更少；）

于 2009-07-20T12:02:41.973 回答
1 
     <!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>
于 2014-01-16T04:17:54.483 回答
1

来自 Coldfusion 站点的示例，我需要从中选择标题列表，长度最多为 200 个字符。选择选项从查询中循环，如果文本字符串太长，则在一个完整的单词点处划分，两个字符串获得相同的选项值。字符模式附加到第二个字符串，在本例中为“_ _”。使用js在选择的文本中寻找模式。如果找到模式，则将 selectedIndex 重置为 -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>
于 2012-03-27T20:54:15.310 回答
0

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

这是一个 jquery 插件，用于制作由隐藏的选择元素支持的可样式化无序列表。

源码在github上：https ://github.com/tncbbthositg/GiantDropdown

您将能够处理 UL 上无法使用 SELECT 处理的行为和样式。其他一切都应该是一样的，因为选择列表仍然存在，它只是被隐藏了，但 UL 将使用它作为支持数据存储（如果你愿意的话）。

于 2012-06-26T16:15:41.970 回答