问题描述
我有一个从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的解决方案,但是,该解决方案仅更新了下拉菜单中的项目。 我添加了相同的代码以对所选项目执行相同的操作。 但是,此解决方案将覆盖my和elements。
<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>
1楼
使用角度过滤器'limitTo'截断字符串。 看到
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;
}