Entrar Ainda não tem acesso?
2
respostas

Não quebrar texto dentro tabela html

por Mario Sergio
| 7k xp | 13 posts

**Estou tentando truncar um texto dentro de uma célula. **

CSS.

.table-size { width: 1085px;}

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

.table-size tr td { vertical-align: baseline; padding-left: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}

Html

       <table class='table-size' cellspacing="0">
                    <tr>
                        <td width ='30px'  style='background-color: #D3D3D3;'>Cód.</td>
                        <td width ='45px'  style='background-color: #D3D3D3;'>Contrato</td>
                        <td width ='45px'  style='background-color: #D3D3D3;'>Evento</td>
                        <td width ='30px'  style='background-color: #D3D3D3;'>Hora</td>
                        <td width ='30px'  style='background-color: #D3D3D3;'>Conv.</td>
                        <td width ='45px'  style='background-color: #D3D3D3; text-align: right;' >Valor</td>
                        <td width ='270px' style='background-color: #D3D3D3; text-align: right;'>Cliente</td>
                        <td width ='200px' style='background-color: #D3D3D3;'>Telefone</td>                 
                        <td width ='390px' style='background-color: #D3D3D3;'>Pacote</td>
                    </tr>
                    <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 ='390px' style='font-size: 10px;'>{{mb_convert_encoding($evento->descricao,  'UTF-8', 'ISO-8859-1')}}</td>
                    </tr> 
        </table>

Ao invés do texto truncar, em relação ao tamanha da célula, a célula está expandindo em relação ao tamanho do texto. Alguém tem uma ideia de onde estou errando?

2 respostas
por Estudante
| 26.9k xp | 2 posts

O problema está na forma como você está definindo o tamanho das células da tabela. Você está usando width para definir a largura das células, mas isso não é suficiente para evitar que a célula se expanda para acomodar o conteúdo.

Para resolver o problema, você precisa definir uma largura fixa para a célula usando uma propriedade CSS como max-width. Você também pode usar word-break: break-all; para permitir que o texto quebre em outras linhas, o que ajudará a evitar que a célula se expanda horizontalmente.

Aqui está um exemplo de como você pode corrigir o CSS:

.table-size { width: 1085px; }

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

.table-size tr td { vertical-align: baseline; padding-left: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 300px; /* Define a largura máxima para a célula / word-break: break-all; / Permite que o texto quebre em outras linhas */ }

Neste exemplo, adicionei max-width: 300px; para cada célula. Você pode ajustar o valor de max-width para o tamanho que melhor se adapta às suas necessidades. O word-break: break-all; irá permitir que o texto quebre em outras linhas, o que ajudará a evitar que a célula se expanda horizontalmente.

Lembre-se de que a propriedade width ainda está sendo usada para definir o tamanho inicial da célula, mas a propriedade max-width irá garantir que a célula não se expanda além do tamanho definido.

por Mario Sergio
| 7k xp | 13 posts

"Aluno", conforme sua sugestão troquei o width pelo max-width... 

                        <td max-width ='270px' style='background-color: #D3D3D3;'>Cliente</td>
                        <td max-width ='200px' style='background-color: #D3D3D3;'>Telefone</td>                 
                        <td max-width ='390px' style='background-color: #D3D3D3;'>Pacote</td>

No entanto, a célula continua expandindo. Em relação ao uso do "word-break: break-all" eu não usei, pois quero abreviar o texto que ultrapassar o limite da célula. 

Resultado sem : word-break: break-all

Cliente                                                                                                                               
ACILMARIAA ESTRELLAESTEVES PEREIRA RUFIÃO CABELEIR  

Resultado com: word-break: break-all

Cliente                                                                
ACILMARIAA ESTRELLAESTEVES   
PEREIRA RUFIÃO CABELEIR               (quebra)

Esperado

Cliente                                                                  
ACILMARIAA ESTRELLAESTEVES...

Complemento:

Usei "table-layout: fixed" nesse caso ele dividiu as células em tamanhos iguais, não considerou o width (inlie) nas <td's>. Também usei "table-layout: auto" e não funciou.