我有一个标签输入字段，我需要显示尽可能多的内容，适合它周围的假“输入”div，如下所示：
<div class="btn btn-secondary">
<span class="tag">Tag 1</span>
<span class="tag">Tag 2</span>
<span class="tag">Tag 3</span>
<span class="tag">Tag 4</span>
<input>
</div>
（我在那里以编程方式添加标签，一个 Angular 组件）。我的带有按钮类的外部 div 假装是一个输入，在内部我显示当前标签（样式）以及它们右侧的实际输入。
目标是显示一些尽可能多的标签，然后为输入留出一些空间，如下所示：
________________________________
| tag1 tag2 tag3 ... _INPUT_ |
---------------------------------
标签已设计样式（并带有 X 按钮）。因此，如果我删除一些标签，我需要删除省略号（...），如果我添加更多，它们将不会显示（它们在工具提示中）。
输入具有最小宽度，但如果没有任何（或足够的）标签，它应该填充空间。所以，tag tag inpuuuuuuuuuuuuut一直到右边界。如果我们删除一个标签，输入就会填满空间，如果我们添加一个标签，输入就会缩小（直到 minWidth）。
这样做的常识性方法是什么？我想我需要让每个标签计算并报告它的宽度，然后让包装器 div 选择多少个标签适合并隐藏其他标签，并在需要时添加省略号标签。有没有更简单的方法（需要 IE11 最低支持）？
这里有一个crazy使用一些弹性和定位的想法（您可能需要根据自己的情况调整一些值）
.btn {
width: 310px;
border: 1px solid;
display: flex;
height: 20px;
margin-bottom: 10px;
}
input {
width: 170px;
}
.btn > div {
flex: 1;
position: relative;
height: 100%;
}
.btn > div > div {
position: absolute;
top: 0;
left: 0;
bottom: 0;
overflow: hidden;
}
.btn > div > div:after {
content: "...";
position: absolute;
right: 2px;
bottom: 5px;
}
.tag {
background: #fff;
position: relative;
z-index: 2;
}
<div class="btn">
<div>
<div>
<span class="tag">Tag 1</span>
<span class="tag">Tag 2</span>
<span class="tag">Tag 3</span>
</div>
</div>
<input>
</div>
<div class="btn">
<div>
<div>
<span class="tag">Tag 1</span>
<span class="tag">Tag 2</span>
<span class="tag">Tag 3</span>
<span class="tag">Tag 4</span>
<span class="tag">Tag 5</span>
</div>
</div>
<input>
</div>
<div class="btn">
<div>
<div>
<span class="tag">Tag 1</span>
<span class="tag">Tag 2</span>
</div>
</div>
<input>
</div>
<div class="btn">
<div>
<div>
<span class="tag">Tag 1</span>
<span class="tag">Tag 2</span>
<span class="tag">Tag 3</span>
<span class="tag">Tag 4</span>
<span class="tag">Tag 5</span>
<span class="tag">Tag 6</span>
<span class="tag">Tag 7</span>
</div>
</div>
<input>
</div>
UPDATE
现在，如果没有足够的标签，输入将向左拉伸：
.btn {
width: 310px;
border: 1px solid;
display: flex;
height: 20px;
margin-bottom: 10px;
overflow: hidden;
}
input {
flex: 1;
min-width: 170px;
}
.btn > div {
position: relative;
height: 100%;
overflow: hidden;
}
.btn > div:after {
content: "...";
position: absolute;
right: 2px;
bottom: 5px;
}
.tag {
background: #fff;
position: relative;
z-index: 2;
}
<div class="btn">
<div>
<span class="tag">Tag 1</span>
<span class="tag">Tag 2</span>
<span class="tag">Tag 3</span>
</div>
<input>
</div>
<div class="btn">
<div>
<span class="tag">Tag 1</span>
<span class="tag">Tag 2</span>
<span class="tag">Tag 3</span>
<span class="tag">Tag 4</span>
<span class="tag">Tag 5</span>
</div>
<input>
</div>
<div class="btn">
<div>
<span class="tag">Tag 1</span>
<span class="tag">Tag 2</span>
</div>
<input>
</div>
<div class="btn">
<div>
<span class="tag">Tag 1</span>
<span class="tag">Tag 2</span>
<span class="tag">Tag 3</span>
<span class="tag">Tag 4</span>
<span class="tag">Tag 5</span>
<span class="tag">Tag 6</span>
<span class="tag">Tag 7</span>
</div>
<input>
</div>
<div class="btn">
<div>
<span class="tag">Tag 1</span>
</div>
<input>
</div>
<div class="btn">
<div>
</div>
<input>
</div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
