使用javascript或jquery截断Drop溺水菜单中的项和选定项

我有一个从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>

{用户中的课程百分比|获取用户课程百分比}

{%endfor%}

我添加了一个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>

var-len=15；
$（'#导航中的航向'）。更改（函数（）{
var text=$（this.text（）；
console.log（$（this.text（））；
console.log（$（this.text（）.length）；
如果（text.length>len）{
$（this.text（）=text.substring（0，len）+'…'；
}
});

我该怎么做呢？先谢谢你

更新 然而，我使用了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>

$（函数（）{
$（'.dropdown menu'）。查找（'li'）。每个（函数（）{
var link=$（this.find（'a'）；
变量长度=$（link）.text（）.length；
如果（长度>15）{
var truncated=$（link.text（）.substring（0,15）+'…'；
$（link.text（截断））；
}
});
});
$（函数（）{
$（'.dropdown'）.find（'a'）.each（function（）{
var text=$（this.text（）；
var length=text.length；
如果（长度>15）{
截断=文本。子字符串（0，15）+'…'；
console.log（截断）；
$（$（this）.text（截断））；
}
});
});

使用角度过滤器“limito”截断字符串。请参见

您实际上不需要javascript。您可以在设置了宽度的任何块级元素上使用

文本溢出：省略号

和

溢出：隐藏

。它将截断任何不适合宽度的文本，并添加。。。例如：

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

---

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