elementui-在表格中使用省略号来显示超链接内容过长

关注

原创最新推荐文章于 2026-09-28 15:55:04 发布 1.2k 阅读 AI 写同款· GEO 优化 ›

【前端面试知识题】- 3. HTML && CSS BFC是CSS布局的一个概念，是一个独立的渲染区域，规定了内部box如何布局，并且这个区域的子元素不会影响到外面的元素，其中比较重要的布局规则有内部 box 垂直放置，计算 BFC 的高度的时候，浮动元素也参与计算。来调整图片的位置，不过HTTP2不适用，原因为HTTP2实际上是多路复用的，只用一个TCP连接，所以多个图片的请求也是在同一个TCP连接里，这样能省下非常多的请求时间，但坏处就是单连接开销很大，如果要传多个大文件，就很麻烦。面对经济的下行和大学生毕业人数的突增，现在的就业状况极其严峻。阅读详情

可以利用CSS的文本溢出属性来实现：

<template>
  <el-table :data="tableData" style="width:100%;">
    <el-table-column prop="name" label="姓名"></el-table-column>
    <el-table-column prop="link" label="超链接" show-overflow-tooltip>
      <template slot-scope="scope">
        <a class="ellipsis-link" :href="scope.row.link">{{ scope.row.link }}</a>
      </template>
    </el-table-column>
  </el-table>
</template>

<style>
.ellipsis-link {
  display: inline-block;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>

通过将超链接的样式设置为ellipsis-link，我们使用CSS的white-space: nowrap属性来防止文本换行，使用overflow: hidden属性来隐藏超出部分，最后使用text-overflow: ellipsis属性来以省略号显示超出部分（这块不能显示，必须设置show-overflow-tooltip这个属性才会显示超出部分）。

收录于