如何用省略号隐藏额外的 div？

Question

我有一个标签输入字段，我需要显示尽可能多的内容以适应它周围的假 "input" 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 和按钮 class 假装是一个输入，我在里面显示当前标签（样式化）和它们右侧的实际输入。目标是显示一些标签，尽可能多，然后为输入留下一点 space，如下所示：

________________________________
| tag1  tag2  tag3  ... _INPUT_ |
---------------------------------

标记已设置样式（并带有 X 按钮）。因此，如果我删除一些标签，我需要删除省略号 (...)，如果我添加更多标签，它们将不会显示（它们在工具提示中）。

输入有最小宽度，但如果没有任何（或足够的）标签，它应该填满 space。所以，tag tag inpuuuuuuuuuuuuut一直到右边界。如果我们删除一个标签，输入会填满 space，如果我们添加一个，输入会缩小（直到 minWidth）。

执行此操作的常识性方法是什么？我在想我需要让每个标签计算并报告它的宽度，然后让包装器 div 选择多少适合并隐藏其他标签，并在需要时添加省略号标签。有没有更简单的方法（需要IE11最低支持）？

Answer 1

这是一个疯狂的想法，使用一些弹性和定位（您可能需要根据您的情况调整一些值）

.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>

更新

现在输入会向左拉伸以防没有足够的标签：

.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>

Answer 2

<div class="btn btn-secondary">
  <div class="tag-box">
    <span class="tag">Tag 1</span>
    <span class="tag">Tag 223131</span>
    <span class="tag">Tag 31231</span>
    <span class="tag">Tag 4</span>
    <span class="tag">Tag 5</span>
  </div>
  <input>
</div>

.tag-box {
    display: block;
    border: 1px solid;
    max-width: 140px;
    padding: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tag-box .tag {
    display: inline;
    overflow: hidden;
    text-overflow: ellipsis;
}

https://jsfiddle.net/dm7bmzky/34/

如何用省略号隐藏额外的 div？

How can I hide extra divs with an ellipsis?

javascript

html

css

twitter-bootstrap-3

ellipsis