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

.ellipsis-cell { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } 是用来设置一个元素的文本内容溢出时显示省略号的样式。通过设置white-space为nowrap，使文本不换行；通过overflow:hidden，使文本内容超出元素宽度时隐藏溢出部分；通过text-overflow:ellipsis，使文本溢出时显示省略号。这样可以有效地处理长文本在有限空间内显示的问题。

相关问题

el-table-column的show-overflow-tooltip内容过长不能完整显示

你可以使用 `tooltip-effect` 属性来设置 tooltip 的显示效果，例如设置为 `light`，这样 tooltip 会在单元格上方显示，并且会跟随鼠标移动，这样可以让你完整地看到单元格的内容。同时，你也可以通过设置 `min-width` 来调整 tooltip 的宽度，使其能够容纳更多的内容。例如：

<el-table-column prop="name" label="姓名" :show-overflow-tooltip="true">
  <template slot-scope="{ row }">
    <div class="cell-ellipsis" :title="row.name">{{ row.name }}</div>
  </template>
</el-table-column>

.cell-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  /* 设置最小宽度为 100px */
  min-width: 100px;
}

// 在 el-table 上设置 tooltip-effect 属性
<el-table :data="tableData" tooltip-effect="light">
  <!-- ... -->
</el-table>

这样就可以让你完整地看到单元格内容了。

vue+el-table-column的show-overflow-tooltip属性 单元格内容空悬浮会触发黑色悬浮框的问题

这个问题可能是由于单元格内容的长度超过了列宽度，导致内容被截断，从而触发了 `show-overflow-tooltip` 属性。你可以尝试添加一个 CSS 样式来解决这个问题：

.el-table__body .cell {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

这个样式将会把单元格的文本限制在单元格内部，并且当文本超出单元格宽度时，将会出现省略号。这样就可以避免单元格内容空悬浮触发黑色悬浮框的问题了。