javascript - 如何使用 javascript 和 css 显示固定为 div 宽度的字符串数组中的更多剩余文本？

Question

我想在 div 中显示以逗号分隔的字符串数组具有宽度(例如:300 像素)。当文本长于div宽度时，会显示文本有三个点和+(数组中剩余文本的数量)，如上图。

谢谢。

Answer 1

这个怎么样？

var main = document.querySelector('main');
var p = document.querySelector('p');
var stringArr = ['Apple', 'Grape fruit', 'Orange', 'Banana', 'KiwiJuice', 'Tangerine'];

function dotdotdot(list){
  var ix, ixLen, listLen;
  var span = document.createElement('span');
  span.textContent = ' + ';
  
  // 1. insert a text into an element
  // 2. compare the scrollWidth and the clientWidth
  //    if scrollWidth is bigger than the other, it means the text has been overflowed
  // 3. find the index of the text which has been overflowed
  // 4. insert <span>+ ?more</span>
  // * when compare two scrollWidths, consider the width of <span> because of the max-width of <main> tag. 
  // * the width of <span> is set by 150 px as an example.
  for(ix = 0, ixLen = list.length; ix < ixLen; ix++){
     if(ix !== ixLen - 1){
       //main.textContent += list[ix] + ', ';
       p.textContent += list[ix] + ', ';
     }else{
       //main.textContent += list[ix];
       p.textContent += list[ix];
     }
     
     if(p.scrollWidth > main.scrollWidth - 150){
       //p.style.overflow = 'hidden';
       //p.style.textOverflow = 'ellipsis';
       p.style.width = p.clientWidth + 'px';
       
       span.textContent += list.length - (ix + 1);
       span.textContent += 'more';
       main.append(span);
       return;
     }
  }
}

dotdotdot(stringArr);

main {
  max-width: 300px;
  height: 30px;
  border: 1px solid #000000;
}

p {
  display: inline-block;
  width: fit-content;
  margin: 0;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

<main>
  <p></p>
</main>