t-tabel 单元格溢出文本省略的实现方法

利用 单行文本溢出省略 + 定位脱流不撑开父级宽度 达到效果

单行文本溢出省略

单行文本溢出省略的实现代码如下

<div class="textbox">
溢出文本溢出文本溢出文本溢出文本溢出文本溢出文本溢出文本溢出文本溢出文本
</div>

.textbox{
    width:60px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

定位脱流不撑开父级宽度

.outer_box{
  height: 22px; 
  position: relative;
}
.inner_box {
  position: absolute; 
  width: 100%;
  //...
}

t-table组件中实现文本溢出

t-table组件中单元格宽度是自适应的，而t-table中写死div宽度会破坏这种自适应；这里利用块级容器自动撑满父级来达到效果；

<t-table >
    <template #textinfo="{ row }">
        <div class="outer_box">
          <div class="inner_box">
              {{row.textinof}}
              溢出文本溢出文本溢出文本溢出文本溢出文本溢出文本溢出文本溢出文本溢出文本
          </div>
        </div>
    </template>
</t-table>

//外层盒子实现宽度自适应单元格
<style>
.outer_box{
  height: 22px; 
  position: relative;
}
//内层盒子通过定位脱流，防止影响单元格宽度的自适应分配
.inner_box {
  position: absolute; 
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>

可以配合popup组件，悬浮显示完整文本来优化用户体验