vue elementui 表格show-overflow-tooltip样式调整

最新推荐文章于 2024-05-30 14:26:50 发布

六加六呀

最新推荐文章于 2024-05-30 14:26:50 发布

阅读量1.3k

点赞数 1

文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/weixin_44761131/article/details/131941123

版权

.el-tooltip__popper,

.el-tooltip__popper.is-dark {

  line-height: 14px;

  max-width: 300px;

}

表格文字太多只显示3行

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






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