请问如何解决select标签option选项内容过长无法完全显示的问题？

bbl8486 2011-01-24 04:30:40

我在开发工程中select标记已经根据页面把它的宽度调整到最大的，但是现在好多备选信息还是比这个长很多，请问如何解决？

...全文

6136 8 打赏收藏转发到动态举报

写回复

用AI写文章

8 条回复

切换为时间正序

请发表友善的回复…

发表回复

sunshine_99 2011-01-30

打赏
举报

前两天刚回答过一个类似的问题，他的问题和你的一样，希望我的代码能帮到你



<style>

 li{width:200px;}

 .a{background-color:#0000FF}

</style> 

<script language="javascript">

    function show(){

        var obj=document.getElementById("list");

        if(obj.style.display=="none"){

        document.getElementById("list").style.display="block";

        }else{

        document.getElementById("list").style.display="none";

        }

    }

</script>        

<div style="width:130px">

<div style="border:1px solid #000;width:100px;height:16px;float:left;text-align:center" >请选择</div>

<div style="border:1px solid #000;width:20px;height:16px;float:left;text-align:center" onclick="show()" onmouseover="this.style.cursor='hand'">∨</div></div>

<div style="clear:both;width:130px;border:1px solid #000;overflow:scroll;display:none;" id="list">

<ul style="list-style:none;margin:0px;padding:0px">

<li onmouseover="this.className='a';this.style.cursor='hand'" onmouseout="this.className=''">这个名字长的我觉得很恶心</li>

<li onmouseover="this.className='a';this.style.cursor='hand'" onmouseout="this.className=''">我想显示整个option的text</li>

<li onmouseover="this.className='a';this.style.cursor='hand'" onmouseout="this.className=''">怎么在下面加横向滑动条</li>

</ul>

</div>

还有一种



<span style= "overflow-x:scroll;width:100px"> 

<select id="Lst_Select1" name="Lst_Select1" multiple="multiple"  style="height: 440;  " > 

<option value= "1">这个名字长的我觉得很恶心</option>

<option value= "2">我想显示整个option的text</option> 

<option value= "3">怎么在下面加横向滑动条</option> 

</select> 

</span>

上面这2种都是用div+css写的样式表，加了一个横向的滚动条。如果lz觉得不太美观的话，可以像楼上所说，给option加上title属性

KK3K2005 2011-01-30

打赏
举报

首先SELECT的项不应该放很长的内容要简练

如果要让用户看的内容比较多
折中的办法是 select中仍旧写的简短然后随着选择项的变化下面出一段选择项的相关说明

碧海情天-赵亮 2011-01-27

打赏
举报

后台对较长的选项内容剪裁，并把完整的信息放在option的title属性中，当鼠标移过去时会自动提示给用户看到完整的选项信息。
<style>
#theforever{width:100px;}
</style>
<select id=theforever>
<option title="很长很长很很长的提示1111111" value='1'>裁剪后的提示……</option>
<option title="很长很长很长很长的提示22222" value='2'>裁剪后的提示……</option>
<option title="很长很长很长很长的提示33333" value='3'>裁剪后的提示……</option>
</select>