Ant Design 表格table 内容超出 溢出、隐藏 、截断
程序员文章站
2022-05-13 21:38:29
...
首先表格要定义上宽度
{
title: '内容',
align: 'center',
dataIndex: 'contents',
width:'45%',
//这里使用插槽
scopedSlots: { customRender: 'titleShow' },
},
不可以使用span标签
我使用的是div标签
title是用来鼠标悬停进行全部内容显示
<div :title="record.contents" :style="{maxWidth: '600px',whiteSpace: 'nowrap',textOverflow: 'ellipsis',overflow: 'hidden', wordWrap: 'break-word', wordBreak: 'break-all' }" slot="titleShow" slot-scope="text, record">
{{record.contents}}
</div>
重要样式设置需要设置宽度
:style="{maxWidth: '600px',whiteSpace: 'nowrap',textOverflow: 'ellipsis',overflow: 'hidden', wordWrap: 'break-word', wordBreak: 'break-all' }"
下一篇: 迷你版QQ实现<采用WEBQQ协议>
推荐阅读
-
CSS 控制
内容超出表格长度后自动隐藏教程
CSS 控制
内容超出表格长度后自动隐藏教程
Ant Design 表格table 内容超出 溢出、隐藏 、截断