为 Bootstrap 个标签输入中的标签设置最大宽度
Set Max-width for Tags in Bootstrap Tags Input
Bootstrap Tags Input
中的标记溢出容器。
所以我想为标签设置最大宽度,或者有什么方法可以阻止 Bootstrap Tags Input
中的标签溢出?
如需参考,请访问 this web site。
只需添加一个 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>');
}
});
但问题是,用户看不到 he/she 添加的标签的全部文本。所以我们可以为 Tag
放置 "Title"
我们需要在第 127 行 bootstrap-tagsinput.js 中进行自定义。
var $tag = $('<span class="tag ' + htmlEncode(tagClass) + '" title="'+htmlEncode(itemText)+'">' + htmlEncode(itemText) + '<span data-role="remove"></span></span>');
因此,现在用户可以在 he/she 将鼠标悬停在特定标签上时看到文本。
Bootstrap Tags Input
中的标记溢出容器。
所以我想为标签设置最大宽度,或者有什么方法可以阻止 Bootstrap Tags Input
中的标签溢出?
如需参考,请访问 this web site。
只需添加一个 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>');
}
});
但问题是,用户看不到 he/she 添加的标签的全部文本。所以我们可以为 Tag
放置 "Title"我们需要在第 127 行 bootstrap-tagsinput.js 中进行自定义。
var $tag = $('<span class="tag ' + htmlEncode(tagClass) + '" title="'+htmlEncode(itemText)+'">' + htmlEncode(itemText) + '<span data-role="remove"></span></span>');
因此,现在用户可以在 he/she 将鼠标悬停在特定标签上时看到文本。