设置Bootstrap标签输入中标签的最大宽度

时间:2015-05-11 10:28:18

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

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

所以我想设置标签的最大宽度,还是有办法阻止Bootstrap Tags Input中的标签溢出?

如需参考,请访问this web site

1 个答案:

答案 0 :(得分: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>');
    }
});

但问题是,用户无法看到他/她添加的标签的全文。所以我们可以放置&#34; Title&#34;对于标签

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

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

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