html - 动态添加省略号并将文本保持在单行中

Question

需要动态添加文本/跨度，并通过添加省略号将所有新添加的文本/跨度保持在一行中；

当我的文本较少时，例如 2 或 3，我会看到完整的文本。但是，仅当动态添加文本/跨度时；我需要将这些省略号添加到它并且仍然在单行中......

我不确定是什么破坏了这里的 css...(忽略添加的边框!)

.breadcrumbs {
  display:inline-block;
  border: 1px solid blue;
  width: 600px;
  height:25px;
  float:left;
}
.crumbs {
  width:24%;
  text-overflow: ellipsis;
  white-space: nowrap;
  border: 1px solid red;
  overflow:hidden;
  display:inline-block;
}

<div class="breadcrumbs">
  <span class="crumbs">TestTest--1--TestTest</span>
  
  <span class="crumbs">TestTest--2--TestTest</span>
  
  <span class="crumbs">TestTest--3--TestTest</span>
  
  <span class="crumbs">TestTest--4--TestTest</span>
  
  <!-- <span class="crumbs">TestTest--5--TestTest</span> -->
</div>

也在 https://jsfiddle.net/w30u0Lc8/

Answer 1

在我看来，width:24% 太大了。您的跨度不大于该范围，因此未添加省略号。例如，将其更改为 10% 即可。

编辑

如果你想要自动更新元素宽度并仅在需要时添加省略号的东西，那么我建议你改用 flexbox。

看这个例子:

var container = document.getElementById('container')

setInterval(function () {
  if (container.children.length < 10) {
    var child = document.createElement('span');
    child.innerText = 'Some text';
    container.appendChild(child);
  }
}, 1000);

div {
  display: flex;
  width: 400px;
  border: 1px solid blue;
  padding: 5px;
}

span {
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  flex: auto;
  border: 1px solid red;
  padding: 5px;
  white-space: nowrap;
}

<div id="container">

</div>

它会每秒添加一个新的跨度。如您所见，子项的大小会自动更新并在必要时添加省略号。