我有一个下拉列表清晰超长文字我的asp.net页面上。 它违反了UI界面和超越UI的分配区域。
反正我有可以换[未修剪]使用CSS或JavaScript呢？ 我必须显示整个字符串，不管它有多长。
Answer 1:
较长的回答：是的。
您可以使用非默认的元素，但使自己的JavaScript和CSS。 您的自定义droplist元素应该包含几个申报单（或其他HTML元素）作为droplist项目。 当您将设置固定宽度droplist的单元格，将文本换行里面。
一个例子是在这里 （刚拿起从查询在谷歌的第一个链接： “JavaScript的下拉列表” ）。
Answer 2:
简短的回答：没有。
较长的答案：用户单选按钮组，而不是选择菜单。 您可以使用CSS overflow属性添加滚动。
Answer 3:
如果你想保持本地选择框的UI表示，有一个（而讨厌）的方式，你可以做到这一点。 这是相当手册，我不会真的建议用普通的，但它可以达到你想要的东西：
对于列表中的每个选项的计算基于在该选项的文本字符的“宽度”。 这应该是比例字体字符宽度的模糊表示（例如。ijtl = 1，aopg = 2，M = 2.5，粗略地之类的事情）。
凡是去超过一定值（估计此基础上可用的UI空间）在适当的点被分裂（空格或连字符长字 - 需要写一个算法来做到这一点）。 重复，直到你有超过所需的大小没有大块。 你应该每个选项的数组结束（有的将只有长度为1，如果已经足够短）。
对于具有匹配阵列大于1更长的每个选项，只是包含的每个文本的后续块的原始后插入选项节点。 给他们一个特别的类（如： long-child ），以及相同的值作为原始。 你应该也给一些视觉指示器，它的上一个项目的延续。
供应的onchange事件处理程序的选择，其中检查是否选择的选项有long-child类。 如果是这样，就应该寻找前面的选项来查找具有相同的价值， 不具备第一long-child类。 设置selectedIndex该选项，而不是。
就像我说的，讨厌的，但可以达到你想要的效果。 它甚至可能会比滚动自己的Pawka的建议代码更少;）
Answer 4:
我认为这是时间去思考不同的接口一块，而不是一个简单的下拉复杂化。
但是，如果你要，我会使用一些CSS / JavaScript来重新创建下拉使用窗列表元素。
Answer 5:
从ColdFusion站点的地方，我需要的标题列表，从选择和长度达到200个字符的一个例子。 选择选项从查询中循环，并在如果文本字符串太长一个完整的字点划分，两个字符串得到相同的期权价值。 的字符图案被附加到所述第二串，在此情况下“_ _”。 用JS来寻找在选择的文本模式。 如果图案是由-1发现复位seletectedIndex所以用户如果他们选择了第二只看到文字的第一行。
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#"> _ _ #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插件，使被隐藏选择元素支持的设置样式的无序列表。
该人士是在GitHub上： https://github.com/tncbbthositg/GiantDropdown
你能够处理在UL的行为和风格，你不能用SELECT。 其他的一切应该是一样的，因为选择列表中仍然存在，它只是隐藏，但UL将使用它作为后备数据存储（如果你愿意）。
文章来源: Wrap long-text in drop-down list?
