【问题标题】:Set Max-width for Tags in Bootstrap Tags Input在 Bootstrap 标签输入中设置标签的最大宽度
【发布时间】:2015-12-15 20:30:07
【问题描述】:

Bootstrap Tags Input 中的标签溢出容器。

所以我想为标签设置最大宽度,或者有什么方法可以阻止Bootstrap Tags Input 中的标签溢出?

参考请访问this web site

【问题讨论】:

  • 发布问题的屏幕截图,以便我们更轻松地提供帮助。
  • 是的,但是我没有足够的声望来张贴截图。
  • 一个小的、可重复的例子会有所帮助,也许在BootplyJSFiddle 中。或者至少包括相关的 CSS/HTML。

标签: twitter-bootstrap-3 bootstrap-tags-input


【解决方案1】:

只需添加一个 Bootstrap-Tagsinput 事件:

$('#Id').on('itemAdded', function(obj) {

    var tagsinputWidth = $('#Id').parent().find('.bootstrap-tagsinput').width();// Width of Bootstrap Tags Input.
    var tagWidth = $('#Id').parent().find('.bootstrap-tagsinput span.tag').last().width();// To get the Width of individual Tag.
    if(tagWidth > tagsinputWidth) {
        //If Width of the Tag is more than the width of Container then we crop text of the Tag
        var tagsText = obj.item.value;// To Get Tags Value
        var res = tagsText.substr(0, 5); // Here I'm displaying only first 5 Characters.(You can give any number)  
        $('#Id').parent().find('.bootstrap-tagsinput span.tag').last().html(res+"..." +'<span data-role="remove"></span>');
    }
});

但问题是,用户看不到他/她添加的标签的全部文本。所以我们可以为标签放置“标题”

我们需要在 bootstrap-tagsinput.js 的第 127 行进行自定义。

var $tag = $('<span class="tag ' + htmlEncode(tagClass) + '" title="'+htmlEncode(itemText)+'">' + htmlEncode(itemText) + '<span data-role="remove"></span></span>');

因此,现在用户可以在将鼠标悬停在特定标签上时看到文本。

【讨论】:

  • 好 Onteru..! , 它工作正常。但我希望这是一个方便的解决方案。我仍在等待最佳解决方案。无论如何,现在我将采用您的解决方案。非常感谢你。坚持下去。
最近更新 更多