【问题标题】:jQuery autocomplete no word wrapjQuery自动完成没有自动换行
【发布时间】:2013-07-01 19:37:40
【问题描述】:

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

问题是当建议太长时,它们会自动换行以占用多行。我想让建议窗口扩展到最大大小并且不显示溢出。问题是我希望这些建议只显示在一行中。我不想为建议框设置固定宽度。如果建议的长度较短,那么我的最大宽度我希望 jQuery UI 设置适当的宽度。

【问题讨论】:

  • 嗨,我已经设置了一个基本的fiddle,你能证明这个问题吗?
  • 我目前在连接到 fiddle 时遇到问题。具体来说,我正在构建一个带有选择/自动完成组合框的表单。我只有 290px 可用于输入,但如果有必要,我可以让建议框扩展到输入左侧的元素上。我可以对宽度进行硬编码,看起来还不错,但我当然不希望建议框覆盖页面上的其他元素,除非有必要。而且,这取决于搜索词。
  • 我已经更新了 JSFiddle 代码。

标签: jquery css jquery-ui jquery-ui-autocomplete


【解决方案1】:

我建议尝试截断结果并将完整的结果文本放在悬停标题文本中。

您可以使用 css 截断结果文本:

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

我已添加到 rusln 的 fiddle 以演示...

【讨论】:

  • 我会记住这一点作为最后的手段,但我想在 LI 中显示全文。
  • 我已经能够让它按照我需要的方式工作,除了省略号。这是我更新的fiddle。类 ui-autocomplete 控制下拉菜单的 css。
  • 要使省略号起作用,只需将我在上面发布的 css 添加到您现有的 css - jsfiddle.net/mN9q6/10
猜你喜欢
  • 1970-01-01
  • 2013-10-10
  • 1970-01-01
  • 1970-01-01
  • 2013-04-24
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多