jQuery自动完成没有单词换行

Question

我正在使用jQuery UI的自动完成功能，但遇到了一个问题，无法解决。

这个问题是当建议太长时它们会自动换行并占用多行。我希望建议窗口扩展到最大尺寸，并隐藏溢出内容。但我仍然想要建议仅以一行显示。我不想为建议框设置固定宽度。如果建议的长度较短，则希望jQuery UI设置适当的宽度。

- Sandy DeLeon

---

嗨，我已经建立了一个基本的fiddle，你能演示一下问题吗？ - rusln

我目前无法连接到fiddle，具体问题是我正在构建一个带有选择/自动完成组合框的表单。我的输入只有290px的空间，但如果必要，我可以接受建议框延伸到输入左侧元素上方的情况。我可以硬编码宽度，看起来效果不错，但当然我不希望建议框遮盖页面上的其他元素，除非必要。这取决于搜索词。 - Sandy DeLeon

我已经更新了JSFiddle代码。 - Sandy DeLeon

Answer 1

我建议尝试截断结果并将完整的结果文本放在悬停标题文本中。您可以使用CSS截断结果文本：

.ui-menu-item a
    {
        max-width:100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }  

我已经在rusln的代码片段中添加了内容，以展示...

- Sam Jones

---

我会把这个作为最后的选择，但是我希望在列表项中显示完整的文本。 - Sandy DeLeon

我已经成功让它按照我的需求工作，除了省略号。这是我的更新版fiddle。类ui-autocomplete控制下拉菜单的CSS。 - Sandy DeLeon

要使省略号起作用，只需将我上面发布的CSS添加到您现有的CSS中- http://jsfiddle.net/mN9q6/10/ - Sam Jones