Question

我有这个：

 <select id="combo1" size="7" name="operacion">
   <option selected="" value="000">Selecciona una categoría</option>
   <option value="1">"AUTORIZACIÓN PARA TRABAJAR POR CUENTA PROPIA"</option>
   <option value="2">"MODIFICACIONES"</option>
   <option value="3">"RENOVACIÓN"</option>                        
 </select>

它的宽度是固定的，但是当选项来自数据库时，它们有时太长而且我无法看到它们。

您可以在此处查看：http://jsfiddle.net/vN47R/

我唯一能找到的是In a fixed width <select multiple> html box, is there a way to see text options that are to long?，但没有帮助我。

Answer 1

您可以在选项上设置标题，这样当您指向该项目时，文本就会显示为工具提示：

<option value="1" title="AUTORIZACIÓN PARA TRABAJAR POR CUENTA PROPIA">"AUTORIZACIÓN PARA TRABAJAR POR CUENTA PROPIA"</option>

演示：http://jsfiddle.net/Guffa/vN47R/2/

我在某些浏览器中对此进行了测试，至少它适用于IE 9，Firefox 6，Chrome 13和Opera 11.但是，它自然无法在您无法指向的情况下工作。项目，例如在手机上。

Answer 2

试试这个：

将您的选择框换入DIV并在其上设置overflow-x: scroll属性并指定宽度。然后，从您的SELECT框中取出特定宽度。这样，SELECT框将根据内容扩展到所需的宽度，您将在DIV上获得水平滚动条。唯一的缺点是，如果您没有设置足够高的高度，则必须向右滚动才能在SELECT框内向下滚动。

Answer 3

尝试使用word-break: break或white-space: normal

具有固定宽度问题的多重选择，选项太长

3 个答案: