If it doesn’t fit in the div, show: more x results

Question

I need to solve the following problem:

I have a div that displays a list of names that are loaded according to a query condition.

This list of names varies a lot, sometimes appears 5, sometimes appears 30 names.

I need to limit the display of the names as follows, show the names until the end of the DIV and at the end appear a counter of the missing ones. For example, instead of appearing NOME1,NOME2,NOME3,NOME4,NOME5 in a DIV that only fits 3 names, appear, NOME1,NOME2,THERE ARE 3 MORE NAMES.

How can I do that?

Today I am showing the names on the screen with the query below, however, sometimes occurs the cited problem.

    <?php
    while (($row = oci_fetch_array($nomes, OCI_ASSOC+OCI_RETURN_NULLS)) != false) {
        $NOME   = $row['NOME'];

        <div id="linhaazul"> 
            <div id="celpaciente"><b><?echo $NOME ?></b></div>                      
        </div>

Answer 1

Create a variable that tells you how many items your result array has and another variable to tell you how many items you’ve shown on the screen. When iterating to show names use an if to show only while the number of items shown on the screen is less than two. If larger, subtract 2 from the total value. It’s gonna be something like

 var quantidadeLinhasNoResultado
 var quantidadeLinhasInseridas

 for iterando no resultado
      if( quantidadeLinhasInseridas < 2)
           mostra o nome
           incrementa quantidadeLinhasInseridas em mais um
      else
           mostra " e mais " (quantidadeLinhasNoResultado - 2) " nomes"
           Sai do for.

Sure, you’ll have to change that part into "pseudo code" for php, but the general idea is this.

Answer 2

Good really, with the items being rendered by PHP it gets a little difficult and any solution will sound like a gambiarra, but come on.

You can use the property text-overflow of CSS, which basically identifies if a given text has exceeded the container boundaries and adds a corresponding text, example...

In a div with 200px and a text exceeding 200px

div#teste {
  white-space: nowrap;
  width: 200px; 
  overflow: hidden;
  text-overflow: ' E mais...';
}

<div id="teste">
Teste teste teste teste teste teste teste teste teste
</div>

(if it does not reach the limit, the string ' E more...' is not added)

Only there was already good size, but if it is a very important requirement count how many were missing, you can do the following...

Exchange the text-overflow from ' And more...' to ' More XX names';

When looping the results, store the number of names in a variable javascript example...

let totalNomes = <?= $total ?> // 30 nomes

After that take the text from div, and check with a regular expression or another method if there is the word " Plus XX names", if there is why the text extrapolated to div, then just take this text, minus the string ' More XX names', give a split in virgulas and check the length, the result will be the amount of names that entered the div.

Ai just subtract this result with the total of names that will give the amount missing in the div, after that is just set in the div a new text overflow replacing ' More XX names', with the resulting value ' More '+result+' names';