截断项目在dropdrown菜单和选择项目使用javascript或jquery
Truncate items in dropdrown menu and selected item using javascript or jquery
我有一个从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>
使用角过滤器'limitTo'截断字符串。看到这个
实际上不需要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;
}
相关文章:
- 动态地改变“”的URL;添加新项目”;链接使用javascript/jquery
- 有没有一种方法可以添加相同的项目val=“0”;4〃;到JavaScript中数组的每个对象
- 学生搜索项目jquery/javascript
- 在javascript中搜索项目列表的性能
- 如何安装Jasmin:Velocity项目上的javascript测试工具
- 在上一次响应时隐藏Qualtrics项目-Javascript
- 如何将JavaScript库添加到我的C#MVC项目中
- Javascript中的列表,用于添加和显示所有项目
- 原始javascript将json对象中的项目打印到列表中的屏幕上
- 使用JavaScript或jQuery检查单选按钮选择是否与数组中的项目匹配
- JQuery和Javascript没有'在我的项目中不起作用,但在网络上起作用
- JavaScript计算项目的总价
- 当项目投入使用时,Javascript是未定义的
- 在Javascript中,当使用array.prush方法向列表中添加项目时,如何对其进行排序
- 最喜欢的项目Javascript
- 在 Parse 中存储项目(Javascript)
- 在所有项目javascript中显示函数结果
- Javascript游戏项目Javascript /数据库
- 在数组中排序选定的项目(javascript)
- 在选择表单上选中项目 - Javascript