ant Table td 溢出隐藏（省略号）

1.创建组件

components/LineWrap/index.js

/*** td 溢出隐藏 组件*/
import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import { Tooltip } from 'antd';
import Styles from './index.less';export default class LineWrap extends PureComponent {static propTypes = {title: PropTypes.string,lineClampNum: PropTypes.number,};render() {const { title, lineClampNum } = this.props;return (<Tooltip placement="topLeft" title={title}><span className={Styles.lineEllipsis} style={{WebkitLineClamp:lineClampNum}}>{title}</span></Tooltip>);}
}

components/LineWrap/index.less

.lineEllipsis{display: -webkit-box;// -webkit-line-clamp: 2;overflow: hidden;text-overflow: ellipsis;/* autoprefixer: off */-webkit-box-orient: vertical;/* autoprefixer: on */
}

2.引用

width: '35%',
render:(text,record) => {return <LineWrap title={text} lineClampNum={2} />
}

3.效果图

ant Table td 溢出隐藏（省略号）相关推荐

php 反序列化后面有省略号,ant Table td 溢出隐藏（省略号）
1.创建组件 components/LineWrap/index.js /** * td 溢出隐藏组件 */ import React, { PureComponent } from 'react' ...
html td 溢出隐藏,css如何设置td溢出隐藏
方法:首先使用"word-break:keep-all"语句设置不换行:然后使用"overflow:hidden"语句设置超出隐藏部分:最后使用"te ...
table文字溢出显示省略号问题
每日金句『专注做一件事』 2009 年的<麻省理工科技评论>(MIT TechnologyReview)中有一篇文章写道,人脑的带宽只有区区60比特/ 秒,是(那个年代)上网带宽的十万分 ...
多行文本溢出隐藏省略号
多行文本溢出隐藏省略号一.单行文本溢出二.多行文本溢出一.单行文本溢出 /* 单行文本溢出 */.inlines{overflow: hidden;white-space: nowrap;tex ...
css 溢出隐藏省略号代替
溢出的文字省略号显示三部曲 /*1. 先强制一行内显示文本*/ white-space: nowrap; /*2. 超出的部分隐藏*/ overflow: hidden; /*3. 文字用省略号替代超 ...
table表格溢出隐藏
CSS部分: table{table-layout:fixed;width:100%;height:32px;border-collapse:collapse; } table td{border:1 ...
qtreewidgetitem 文字内存太长换行_table文字溢出显示省略号问题
每日金句『专注做一件事』2009 年的<麻省理工科技评论>(MIT TechnologyReview)中有一篇文章写道,人脑的带宽只有区区60比特/ 秒,是(那个年代)上网带宽的十万分之 ...
css td 溢出改为省略号
<style>.table{table-layout: fixed;width:100%;}.td{width:100px; white-space: nowrap;overflow: h ...
2、多效果、太极图、党徽和五角星、时钟、animation、文本溢出显示省略号、Flex布局、Flex容器、链接状态、选择器、清除浮动、table表格合并、点击事件、半包围效
2.多效果.太极图.党徽和五角星.时钟.animation.文本溢出显示省略号.Flex布局.Flex容器.链接状态.选择器.清除浮动.table表格合并.点击事件.半包围效.getBoundingC ...

ant Table td 溢出隐藏（省略号）

ant Table td 溢出隐藏（省略号）相关推荐

最新文章

热门文章