如何使用角度添加剩余项目的省略号？

Question

我们如何使用未包含在该区域中的元素计数来实现省略号。

实施例

  

我有一些名字Apple，Mango，Straw，Litchi，Orange，Grapes

我的容器是100px宽，根据宽度只能携带少量名称。

结果应该是

  

Apple，芒果，稻草......还有+3个

或

  

Apple，芒果...如果（宽度较小）还要多加4个

如何用棱角分明来实现这个目标。

Answer 1

var ellipsisCreator = function(array) {
                    var arraySize = [],
                        size = 0,
                        stopCounter = 0;
                        scope.toolTiptext = null;
                        scope.visibleText = null;
                        scope.remaining = 0;
                        for(var i=0;i<array.length;i++){
                            var e=document.createElement('span');
                                document.body.appendChild(e);
                                e.style.fontSize = scope.fontsize+'px';
                                e.setAttribute("class", "posAbs");
                                e.innerHTML = array[i];
                                arraySize.push(e.offsetWidth+5);
                                e.remove();
                                if(size + arraySize[i] >=  scope.length){
                                    stopCounter = i-1;
                                    break;
                                }else{
                                    size = size + arraySize[i];
                                    stopCounter = i;
                                }
                        }
                        scope.visibleText = array.slice(0,stopCounter+1).join(', ');
                        if(stopCounter<array.length-1){
                            scope.toolTiptext = array.slice(stopCounter+1,array.length).join(', ');
                            scope.remaining = (array.length-1) - stopCounter;
                        }
                };