Set Max-width for Tags in Bootstrap Tags Input - twitter-bootstrap-3

Question

The Tags in Bootstrap Tags Input is overflowing the container.
So I would like to set max-width for the Tag or is there any way to stop overflowing the Tags in Bootstrap Tags Input ?
For Reference please visit this web site.

Answer 1

Just Add An Bootstrap-Tagsinput Event:
$('#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>');
}
});
But the Problem is, User can't see the total text of tag that he/she added. So we can place "Title" for the Tag
We need to customize in bootstrap-tagsinput.js at line Number 127.
var $tag = $('<span class="tag ' + htmlEncode(tagClass) + '" title="'+htmlEncode(itemText)+'">' + htmlEncode(itemText) + '<span data-role="remove"></span></span>');
So, Now the User Can visible the Text when he/she mouse-over on that particular Tag.