Question

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

当我有更少的文字如2或3时，我会看到完整的文字。但是，只有在动态添加text / span时;我需要将这些省略号添加到它中并仍然在单行中...

我不确定这里有什么打破css ...（忽略添加的边框！）

＆＃13;

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

＆＃13;

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

＆＃13;

同样在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>

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

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

1 个答案: