Início / coding / Perguntas / 79489065
Accepted
Wouter Vandenputte
Asked: 2025-03-06 18:47:03 +0800 CST

Botão Adicionar Angular/HTML após estouro de texto na célula da tabela

  • 772

Tenho uma tabela e algumas células estouram. Essas <td>têm uma classe que dá a elas reticências no final. Mas há uma maneira de adicionar um pequeno botão/span/qualquer coisa DEPOIS das reticências?

<td #elCol ...>
  <ng-container *ngIf="overflows(elCol)">
    YES <!-- this is displayed when it overflows, the function works -->
  </ng-container>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  <button *ngIf="overflows(elCol)">
    click me <!-- Can't get this to displayed because it is behind the text -->
  </button>            
</td>

td {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 20rem;
}

Podem ser empregadas soluções HTML/SCSS e TS/JS

html

1 respostas

  1. Best Answer

    você pode ter um .containerelemento dentro do <td>, envolvendo os elementos que você precisa um ao lado do outro, estilizando-o com display: flex.

    Então, a largura total do <td>será determinada pelo seu estilo, como você fez com width: 20reme, ainda assim, o texto que será truncado terá sua largura decidida por essa quantidade menos o espaço ocupado pelo botão seguinte.

    function overflows(el) {
   return el.scrollWidth > el.clientWidth;
}

document.addEventListener('DOMContentLoaded', () => {
  const text1 = document.querySelector('tr:nth-child(1) .truncate');
  const text2 = document.querySelector('tr:nth-child(2) .truncate');
  console.log(`The text on the first row does overflow: ${overflows(text1)}`);
  console.log(`The text on the second row does overflow: ${overflows(text2)}`);
})
    td {
  border: solid 1px;    
  padding: .5em;    
  max-width: 20rem;
}

.container{
  display: flex;
  flex-wrap: nowrap;
}

.truncate{  
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.action{
  /*to force the button having a width large enough to avoid word wrap*/
  min-width: fit-content;
}
    <table>
  <tr>
    <td>      
      <div class="container">
        <div class="truncate">              
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.        
        </div>        
        <button class="action">click me</button>                  
      </div>            
    </td>
  </tr> 
  
  <tr>
    <td>      
      <div class="container">
        <div class="truncate">Short text</div>        
        <button class="action">click me</button>                  
      </div>            
    </td>
  </tr> 
</table>

    A demonstração está usando vanilla js/css e não reproduzindo estritamente sua intenção original voltada para Angular. A propósito, eu entendo que o que a lógica *ngIf="overflows(elCol)"faz é renderizar o elemento se o conteúdo estourar o .truncatetamanho do elemento. Então, para mostrar o conceito, eu também implementei minha própria versão da overflowsfunção que retornará trueou falsefornecerá o elemento que você deseja verificar.

    Na demonstração, essa função é invocada sobre ambos os .truncateelementos existentes nas duas linhas da tabela, onde o primeiro está transbordando e o segundo não.

    • 2

relate perguntas