子元素不换行，数量过多时还是会显示一行，但是后面的全用省略号代替

你可以使用 JavaScript 来实现这个功能。具体来说，你可以先获取父级 view 和子集 view 的宽度，然后计算子集 view 的总宽度是否超出父级 view 的宽度。如果超出，则遍历子集 view，从后往前删除直到总宽度小于等于父级 view 的宽度，然后在最后一个子集 view 后添加省略号。

以下是一个示例代码：

<style>
  .parent {
    white-space: nowrap;
    overflow: hidden;
  }
  
  .child {
    display: inline-block;
    width: 100px;
    height: 100px;
    margin-right: 10px;
    background-color: #ccc;
  }
  
  .ellipsis {
    display: inline-block;
    width: 100px;
    height: 100px;
    margin-right: 10px;
    background-color: #ccc;
    text-align: center;
    line-height: 100px;
  }
</style>

<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

<script>
  var parent = document.querySelector('.parent');
  var children = document.querySelectorAll('.child');
  var parentWidth = parent.offsetWidth;
  var childrenWidth = 0;
  
  for (var i = 0; i < children.length; i++) {
    childrenWidth += children[i].offsetWidth + 10; // 10 是 margin-right 的宽度
  }
  
  if (childrenWidth > parentWidth) {
    var ellipsis = document.createElement('div');
    ellipsis.className = 'ellipsis';
    ellipsis.innerHTML = '...';
    parent.appendChild(ellipsis);
    
    for (var i = children.length - 1; i >= 0; i--) {
      childrenWidth -= children[i].offsetWidth + 10;
      parent.removeChild(children[i]);
      
      if (childrenWidth <= parentWidth - ellipsis.offsetWidth) {
        break;
      }
    }
  }
</script>

在上面的代码中，我们使用 white-space: nowrap 和 overflow: hidden 来防止子集 view 换行和超出父级 view 的宽度。然后，我们使用 JavaScript 计算子集 view 的总宽度和父级 view 的宽度，如果总宽度超出父级 view 的宽度，则遍历子集 view，从后往前删除直到总宽度小于等于父级 view 的宽度。最后，我们在最后一个子集 view 后添加省略号。

请注意，这个方法假定所有子集 view 的宽度是一样的，并且 margin-right 的宽度是 10px。如果你使用了不同的宽度或 margin 值，则需要相应地调整代码。