HTML <option> 标签工具提示答案

【问题标题】：HTML <option> tag tooltipHTML <option> 标签工具提示
【发布时间】：2011-01-13 10:14:06
【问题描述】：

我有一个带有许多子节点的标签。我想将此下拉列表的宽度保持在最小尺寸。但是，有时至少一个选项的 innerHTML 很长，迫使下拉列表框扩大其宽度。

我打算做的是截断长文本并使用省略号表示某些字符已被截断（“very loooooong sentence”变为“very loooooo..”）。为了显示全文，我正在考虑在鼠标悬停事件上使用工具提示消息。

不幸的是，每个标签的 onmouseover 事件似乎都不起作用。我该怎么做才能达到这个效果？

谢谢

【问题讨论】：

你试过在
最大宽度/宽度 css 属性有效。但是，我试图通过使用 HTML 的默认功能来显示全文

标签： html events options

【解决方案1】：

为每个选项添加一个标题属性应该可以解决问题。

<option value="1" title="Long description">Short desc...</option>

【讨论】：

AFAIK，是的。标题是一个标准的 HTML 属性，应该可以跨浏览器和操作系统工作。不过，它可能不适用于 iPhone 等触控设备（因为没有光标可以在选项上移动）。

【解决方案2】：

您可以设置<select> 的宽度，下拉菜单将超出选择的宽度。请尝试以下操作：

<select style="width: 30px">
  <option>1</option>
  <option>really long</option>
  <option>even more longer</option>
  <option>This should be long enough to stretch to the end of the page, but the select is still not very long</option>
</select>

【讨论】：