1

我在我的网站中使用 jquery ui 自动完成功能，它在搜索框中列出了所有产品的名称……我向数据库发起查询并检索结果……那不是我的问题……

我的问题是我需要将冗长的产品名称修剪为自动完成框宽度的大小（目前我已将其设置为 180px）并添加三个点（“...”即省略号）...

我已经在普通的 div 元素中尝试过这种 css 样式并且它工作正常..但是当我尝试将它集成到我的自动完成插件时它不起作用......我不知道是什么问题......或者还有其他的将此省略号应用于列表的方法...

自动完成的 CSS 样式是，

 <style>
.ui-autocomplete {
    max-height: 200px;
    max-width: 180px;
    overflow-y:scroll;
    text-wrap: none;
    white-space:nowrap;
    text-overflow:ellipsis;
    overflow:hidden;
    }
 </style>

这里文本溢出：省略号；成功了

*注意： *我不需要水平滚动来解决这个问题......

这是工作示例，

http://jsfiddle.net/FLmfH/

但是当添加到 jquery ui 插件时它不起作用...针对此问题的任何建议或解决方法？...

4

1 回答 1

2

您只需要像这样设置溢出和文本溢出.ui-menu .ui-menu-item a：

.ui-menu .ui-menu-item a {
    text-overflow: ellipsis;
    overflow: hidden;
}

示例：小提琴

$(function() {
  var availableTags = [
    "ActionScript",
    "AppleScript",
    "AAAAaaaaPP PppLLLlll EEEeeeeeee",
    "Asp",
    "BASIC",
    "C",
    "C++",
    "Clojure",
    "COBOL",
    "ColdFusion",
    "Erlang",
    "Fortran",
    "Groovy",
    "Haskell",
    "Java",
    "JavaScript",
    "JaaaaaAAAAvvvvVVVVVvAAAAaaaaaaaaaa",
    "Lisp",
    "Perl",
    "PHP",
    "O oooOoOOoooOOOoo ooOo ooO ooooOoooO ooo oOooooo ooO o oOoooOooOoooOooOoooOoooooo oooooOOoooo oOoooooOo ooooooOoooooooOoO",
    "Python",
    "Ruby",
    "Scala",
    "Scheme"
  ];
  $("#tags").autocomplete({
    source: availableTags
  });
});
.ui-autocomplete {
  max-height: 200px;
  max-width: 180px;
  overflow-y: scroll;
  overflow-x: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  padding-right: 20px;
}
.ui-menu .ui-menu-item a {
  text-overflow: ellipsis;
  overflow: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />

<div class="ui-widget">
  <label for="tags">Tags:</label>
  <input id="tags" />
</div>

于 2013-01-08T06:16:50.550 回答