主页 / coding / 问题 / 79489065
Accepted
Wouter Vandenputte
Asked: 2025-03-06 18:47:03 +0800 CST

表格单元格中的文本溢出后，Angular/HTML 添加按钮

  • 772

我有一张表格，有些单元格溢出了。这些单元<td>格有一个类，在末尾有一个省略号。但是有没有办法在省略号后面添加一个小按钮/跨度/其他东西？

<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;
}

可以采用 HTML/SCSS 和 TS/JS 解决方案

html

1 个回答

  1. Best Answer

    您可能.container在里面有一个元素<td>，将您需要的元素彼此相邻地包装起来，从而用它设置样式display: flex。

    然后，总宽度<td>将由其样式决定，就像您所做的那样width: 20rem，而要截断的文本的宽度将由该量减去后面的按钮占用的空间决定。

    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>

    该演示使用的是 vanilla js/css，并非严格复制您针对 Angular 的初衷。顺便说一句，我理解逻辑的作用 *ngIf="overflows(elCol)"是，如果内容超出.truncate元素大小，则渲染元素。因此，为了展示这个概念，我还实现了我自己的函数版本overflows，它将返回true或false给出您愿意检查的元素。

    在演示中，该函数对.truncate两个表行中存在的元素都进行调用，其中第一个元素溢出，而第二个元素没有溢出。

    • 2

相关问题