Wie kann die Anzahl + mehr von übrig gebliebenen Text von String-Array auf div-Breite mit Javascript und CSS angezeigt werden?

Question

Ich möchte string Array durch Kommata getrennt in div hat Breite (ex: 300px). Wenn Text länger als die div-Breite ist, wird es zeigen, dass Text drei Punkte und + (Anzahl der verbleibenden Texte im Array) wie das Bild oben hat.

Danke.

Answer 1

Wie wäre das?

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>

Answer 2

Versuchen Sie, auf Ihrem div mit diesem:

text-overflow: ellipsis;