Problema de tamaho das células da tablea (white-space: nowrap) | Front-end

Estou repostando minha dúvida com maiores detalhes.

Tenho uma tabela que recebe valores do banco de dados para visualização. No entanto, se o valor for maior que o tamanho da célula quero truncar o valor e exibir reticências. Optei por fazer por CSS, mas não consigo fazer funcionar nem com reza forte! Já olhei vários exemplos, fiz vários testes e nada. Cheguei na fase que o erro se torna "invisível", se alguém puder dar sugestão fico grato.

Detalhes:

As colunas da tabela são fixas;
Não existe quebra de linha em nenhuma célula da tabela
A saída é um relatório exportado para o Dompdf.
Poderia fazer um jquery ou JavaScrit, mas como vi essa solução em CSS, gostaria de vê-la funcionando.
abaixo o código completo.

<header>   
    <style>

        .borda{
            border: 1px solid silver; 
            border-radius: 2px;     
            box-shadow: 10px 5px 5px black;            
        }          

        .logoRelatorio img{
            width: 45px;
            height: 45px;
            padding: 5px;
        }

        @page {             
            size: A4 landscape;
            margin: 15px; 
        }

        .quebrar {
            page-break-after: always;
        }

        span{
            font-size: 10px;
        }

        .table-size{
            width: 1085px;    
            background-size: 100%;                   
        }

        .table-size tr{            
            font-family: sans-serif;
            font-size: 10px;              
        }

        .table-size tr td{
            vertical-align: baseline;
            padding-left: 4px;                 
            overflow: hidden;           /* Oculta qualquer texto que ultrapasse o tamanho da célula */
            text-overflow: ellipsis;    /* Adiciona reticências para texto que ultrapassa o tamanho da célula */                        
            white-space: nowrap;       /* Impede quebras de linha dentro das células */            
        }

        .titulo-relatorio tr th{
            font-size: 13px;
            text-align: left;
        }

    </style>

</head>

<body>

    <div>

        @php           
            $i = 100;             
            $temTabelaAberta = 'F'
        @endphp
        
            @foreach ($eventos as $evento)                 
                @if ($i > 53)           
                
                    @if ($temTabelaAberta == 'T')                    
                        </table>                     
                        <div class='quebrar'></div>                        
                    @endif                 

                    <table class='table-size' cellspacing="0">
                        <tr>
                            <td width ='30px'  >Cód.</td>
                            <td width ='45px'  >Contrato</td>
                            <td width ='45px'  >Evento</td>
                            <td width ='30px'  >Hora</td>
                            <td width ='30px'   >Conv.</td>
                            <td width ='45px'   >Valor</td>
                            <td width ='270px '>Cliente</td>
                            <td width ='200px' >Telefone</td>                 
                            <td width ='330px''>Pacote</td>
                        </tr>
                        <tr></tr>

                    @php
                        $i = 10;        
                        $temTabelaAberta = 'T'                
                    @endphp
                   
                @endif

                <tr>
                    <td width ='30px'>{{$evento->idfesta}}</td>
                    <td width ='45px'>{{date("d/m/Y", strtotime($evento->dtcontrato))}}</td>                
                    <td width ='45px'>{{date("d/m/Y", strtotime($evento->dtfesta))}}</td>
                    <td width ='30px'>{{$evento->horainicio}}</td>
                    <td width ='30px'>{{$evento->nupessoas}}</td>
                    <td width ='45px'  style='text-align: right;'>{{number_format($evento->vltotalevento, 2, ',' ,'.')}}</td>
                    <td width ='270px' style='font-size: 10px;'>{{mb_convert_encoding($evento->nmcliente,'UTF-8','ISO-8859-1')}}</td>
                    <td width ='200px' style='font-size: 10px;'>{{$evento->telefone}}</td>              
                    <td width ='330px' style='font-size: 10px;'>{{mb_convert_encoding($evento->descricao,  'UTF-8', 'ISO-8859-1')}}</td>
                </tr> 

                @php   
                    $i=$i+1;       
                @endphp

            @endforeach                
        
        </table>   
        
        <br><br>
        
    </div>

</body>

O problema tá na propriedade white-space: nowrap; que você adicionou às células (td) da tabela. Essa propriedade impede quebras de linha dentro das células, o que é útil para garantir que o texto não seja dividido em várias linhas, mas também impede que o texto seja truncado com reticências.

Remove a propriedade white-space: nowrap;, assim o texto vai ser truncado com reticências quando exceder o tamanho da célula. Só que isso pode fazer com que o texto se divida em várias linhas, o que pode não ser desejável.

Adiciona um contêiner pro texto e aplicar o estilo white-space: nowrap; a esse contêiner: assim o texto vai ser truncado com reticências dentro do contêiner, enquanto ainda permite que o restante da célula se ajuste automaticamente para exibir o texto em várias linhas, se necessário.

Assim:

<td width ='270px'>
    <div class="texto-truncado">{{mb_convert_encoding($evento->nmcliente,'UTF-8','ISO-8859-1')}}</div>
</td>

E no seu CSS:

.texto-truncado {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%; /* Certifique-se de definir uma largura máxima para o contêiner */
}

Isso deve permitir que o texto seja truncado com reticências quando exceder o tamanho da célula, enquanto ainda permite que o restante da célula se ajuste conforme necessário.

Valeu@

Mergulhe em programação