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

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/

我唯一能找到的是在一个固定的宽度<HTML框，有没有办法看到文本选项是太长?>

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