bootstrap tagsinput - 如何仅在input元素中显示标记（限制最大标记）

Question

我希望标签的填充范围与输入元素一样宽。

1. 如果标签的填充超出了输入元素的宽度，我想隐藏，不要将其添加到底部，如图所示。



1. 我希望能够通过点击输入元素或其他元素（如滑动切换）来查看隐藏的标记。

2. 或者，让我告诉你一个带有此功能的jquery标签，而不是bootstrap。

CSHTML。

 <span class="search_op_bar"><input type="text" id="trans_Langs_tag" data-role="tagsinput"></span>

自定义css

.bootstrap-tagsinput {
padding: 4px 6px;
/*color: #555;*/
vertical-align: middle;
border-radius: 4px;
max-width: 100%;
height:30px; /*Custom*/
line-height: 23px;/*Custom*/
}
.bootstrap-tagsinput input {
border: none;
box-shadow: none;
outline: none;
background-color: transparent;
padding: 0 6px;
margin: 0;
width: auto;
display:none;/*Custom*/
max-width: inherit;
height:30px; /*Custom*/
}