Question

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

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

我在普通的div elemnt中尝试过这种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/

但here在添加到jquery ui插件时无法正常工作...此问题的任何建议或解决方法？...

Answer 1

您只需在.ui-menu .ui-menu-item a上设置overflow和text-overflow，就像这样：

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

示例：Fiddle

$(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>

如何在jquery ui自动完成插件中将省略号添加到冗长的文本中？

1 个答案: