elementui表格内容太多，只显示3行（根据自己需求，几行都可以），超出部分用省略号代替，鼠标悬停，tooltip提示

最新推荐文章于 2024-08-21 16:50:23 发布

姜崽

最新推荐文章于 2024-08-21 16:50:23 发布

阅读量7.9k

点赞数 14

分类专栏： element-ui 文章标签： css

本文链接：https://blog.csdn.net/qq_51296646/article/details/119479550

版权

CSS 文本省略多行显示表格优化 -webkit-line-clamp

关键词由CSDN通过智能技术生成

element-ui 专栏收录该内容

6 篇文章 2 订阅

订阅专栏

今天遇见一个需求

=表格内容太多，想显示3行，剩余的文字用省略号代替

如果你的需求只显示一行，那就一个属性搞定 show-overflow-tooltip 详情见官网

show-overflow-tooltip就生效，只显示一行

        <el-table-column
          show-overflow-tooltip
          prop="content"
          header-align="center"
          align="center"
          label="内容">
        </el-table-column>

如果你的需求是，显示多行，剩余的省略

<el-table-column
          width="300"
          prop="content"
          header-align="center"
          align="center"
          label="内容">
          <template slot-scope="scope">
            <el-tooltip :content="scope.row.content" placement="top">
              <p class="showOverTooltip">{{scope.row.content}}</p>
            </el-tooltip>
          </template>
        </el-table-column>

关键就在这个css，自己设置一个css，想显示多少行，自己设定

<style scoped>
.showOverTooltip{
  display:-webkit-box;
  text-overflow:ellipsis;
  overflow:hidden;
    /*这里是3行*/
  -webkit-line-clamp: 3;
  -webkit-box-orient:vertical;
}
</style>