如何在表格单元格里面实现：当数据长度过长超过单元格宽度时自动换行？

  • Z时代
  • 2024-02-07
  • 分类：IT

利用element的布局标签实现一个表格，如何在表格单元格里面实现：当数据长度过长超过单元格宽度时自动换行？
css:

  .table-col {
    border-bottom: solid .0625rem #ffffff;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    .table-item:not(:last-child) {
      border-right: solid .0625rem #eaf2f8;
    }
    .table-item {
      height: 100%;
      display: flex;
      ::v-deep span {
        flex: 1;
        height: 100%;
      }
      .cell {
        background-color: #f0f0f0;
        color: #000000;
        font-weight: bold
      }

html:

<el-row class="table-col">
      <el-col class="table-item">
        <span style="background-color:#000000;color:#faefe9 ;">SN</span>
        <span class="cell">{{ titlelist.sn }}</span>
      </el-col>
    </el-row>

回答：

使用这个，可以自动换行 word-break: break-all

回答：

从目前的代码部分来看，猜测应该是这里的样式导致的

::v-deep span {
  flex: 1;
  height: 100%;
}

因为使用了 flex: 1;，所以，span 就具有弹性的特性，会自动伸缩，如果你要设置一个自动换行，那么至少要保证这个盒子容器的宽度最大值，比如尝试给 span 加上一个 max-width，然后就可以换行了。

如果这个元素内的内容都是单字节的连续字符的话，那么就需要加上 @fanbingbing16 所说的 word-break: break-all; 来强制换行。

仅根据问题中的已知情况而进行的猜想

以上是 如何在表格单元格里面实现：当数据长度过长超过单元格宽度时自动换行？ 的全部内容， 来源链接： utcz.com/p/934839.html

回到顶部