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

Question

我有一个标签输入字段，我需要显示尽可能多的适合假冒＆＃34;输入＆＃34;围绕它的div，像这样：

Dir.glob("*.txt").flat_map do |file|
  File.read(file).split.grep(/\A[[:alnum:]]{6}\z|\Amap_.*/)
end

（我在那里以编程方式添加标签，一个Angular组件）。我的外部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>

标签的样式（以及X按钮）。因此，如果我删除一些标记，我需要删除省略号（ ... ），如果我添加更多，则不会显示它们（它们在工具提示中）。< / p>

输入具有最小宽度，但如果没有任何（或足够）标记，则应填充空格。所以，________________________________ | tag1 tag2 tag3 ... _INPUT_ | --------------------------------- 一直到右边界。如果我们删除一个标记，则输入填充空格，如果我们添加一个，则输入收缩（直到minWidth）。

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

Answer 1

这是一个疯狂的想法，使用一些flex和positionning （你可能需要根据你的情况调整一些值）

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

<强>更新

现在，如果没有足够的标签，输入将向左伸展：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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/