如何显示很长的选择选项的所有文本?

问题描述：

我在<select>框中有一些很长的<option>，但是我不希望该框这么宽.问题是，当我将框的样式设置为较小时，无法阅读全文.我正在考虑将文本的副本完全悬停在鼠标指针悬停的选项上，但前提是文本太长而无法完全显示.

I have some very long <option>s in a <select> box but I don't want the box to be so wide. The problem is that the full text can't be read when I style the box smaller. I was thinking about hovering a copy of the text exactly over the option the mouse pointer is over but only if the text is too long to be fully displayed.

但是，如果我创建一个新元素，用jQuery说<p>，直到将其插入文档之前它没有宽度，所以我无法决定是否插入它.

However, if I create a new element, say a <p> with jQuery it doesn't have a width until I insert it into the document so I can't decide whether to insert it or not.

即使我成功创建了它，也不确定所有样式是否相同.

Even if I did create it successfully I'm not sure all the styles would be the same.

是否有办法使这个想法生效，或者有更好的方法来显示长<option>的完整文本?

Is there a way to get this idea working or is there a better way of displaying the complete text of the long <option>s in-place?

答

这是怎么回事?

<select id="muchtextselect">
  <option value="" title="This is some long text text This is some long text text This is some long text text ">This is some long text text This is some long text text This is some long text text </option>
  <option value="">Short Text</option>
  <option value="" title="This is some really, really long text">This is some really, really long text</option>
</select>

var maxLength = 15;
$('#muchtextselect > option').text(function(i, c) {
  if (c.length > maxLength) {
    return c.substr(0, maxLength) + '...';  
  }
});

工作演示

WORKING DEMO

如何显示很长的选择选项的所有文本?

相关推荐