使用 javascript 或 jquery 截断下拉菜单中的项目和选定的项目答案

【问题标题】：Truncate items in dropdrown menu and selected item using javascript or jquery使用 javascript 或 jquery 截断下拉菜单中的项目和选定的项目
【发布时间】：2015-07-17 21:50:10
【问题描述】：

我有一个从 django 对象填充的下拉菜单。这些项目可以比下拉菜单的宽度长很多，并且不希望宽度改变。

如何限制它只显示列表中的前 15 个字符并在第 15 个字符后附加 ...？

我的模板中有以下内容：

<li class="dropdown">
  <a class="btn-warning" href="{% url 'courses:course-detail' course.id %}" id="course-name-nav" data-toggle="dropdown" class="dropdown-toggle pull-right"><span class="glyphicon glyphicon-home pull-left"></span>{{course.name}}<b class="caret"></b></a>
  <ul class="dropdown-menu">
   {% for course in user|get_user_courses %}
     <li><a href="{% url 'courses:course-detail' course.id %}" id="course-list-item">{{course.name}}</a></li>
   {% endfor %}
  </ul>
</li>

我添加了一个 jQuery 脚本：

<script type="text/javascript">
    var len = 15;
    $('#course-in-nav').change(function() {
       var text = $(this).text();
       console.log($(this).text());
       console.log($(this).text().length);
       if(text.length > len) {
          $(this).text() = text.substring(0, len) + '...';
      }
  });
</script>

我该怎么做呢？提前谢谢你。

更新但是，我使用了 Sushil 的解决方案，它只更新了下拉菜单中的项目。我添加了相同的代码来对所选项目执行相同的操作。但是，此解决方案正在覆盖我的和元素。

<script type="text/javascript">
$(function(){
$('.dropdown-menu').find('li').each(function(){
    var link = $(this).find('a');
    var length = $(link).text().length;
    if(length > 15){
        var truncated = $(link).text().substring(0, 15) + '...';
        $(link.text(truncated));
    }
});
});
$(function(){
$('.dropdown').find('a').each(function(){
    var text = $(this).text();
    var length = text.length;
    if(length > 15){
        truncated = text.substring(0, 15) + '...';
        console.log(truncated);
        $($(this).text(truncated));
    }
});
});
</script>

【问题讨论】：

试试这个jsfiddle.net/4262prrs/3
实现相同目标的纯 CSS 解决方案是否可以接受？
@Sushil 它在下拉菜单中起作用，但在显示所选项目时不起作用。看到我上面的编辑，现在它似乎覆盖了和 元素的问题？
你能更新小提琴并添加生成的下拉菜单以便我修复它吗？

标签： javascript jquery django text truncate

【解决方案1】：

使用角度过滤器“limitTo”截断字符串。见this

【讨论】：

【解决方案2】：

您实际上不需要 javascript。您可以在任何设置了宽度的块级元素上使用text-overflow: ellipsis 和overflow: hidden。它会截断任何不适合宽度的文本并添加...例如：

.dropdown-menu li a {
    display: block;
    width: 150px;/* this can be any width you want */
    text-overflow: ellipsis;
    overflow: hidden;
}

【讨论】：