过长省略问题
要求：当超出限制长度后，用...表示鼠标移入时显示全部内容
CSS样式实现：
overflow溢出
值: visible | hidden | scroll | auto | inherit
初始值: visible
应用于: 块级元素、替换元素、表单元格
继承性: 无
//页面内 *.html/*.js/*.php
<div className={styles.studentNameAndCode}> <div className={styles.studentName}> {studentName} </div> <div className={styles.studentCode}> {studentCode} </div></div>
//样式页 *.css/*.less.studentName,.studentCode { white-space: nowrap;//强制文本在一行显示 overflow: hidden;//文本溢出显示…（clip为不显示） text-overflow: ellipsis;//溢出内容隐藏 max-Width: 50px;//定义宽度，文本内容在这个宽度内不会隐藏}//CSS样式在antd-Table组件中
<Table.Column title="班级" dataIndex="classname" width="25%" render={(classname) => { return ( <span title={classname} style={{ white-space:‘nowrap’,//强制文本在一行显示 text-overflow:‘ellipsis’,//文本溢出显示…（clip为不显示） overflow:‘hidden’,//溢出内容隐藏 max-width:‘100px’//定义宽度，文本内容在这个宽度内不会隐藏 }} > {classname} </span> ); }}/>Antd组件实现：
Ellipsis文本自动省略号
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| tooltip | 移动到文本展示完整内容的提示 | boolean | - |
| length | 在按照长度截取下的文本最大字符数，超过则截取省略 | number | - |
| lines | 在按照行数截取下最大的行数，超过则截取省略 | number | 1 |
| fullWidthRecognition | 是否将全角字符的长度视为 2 来计算字符串长度 | boolean | - |
import Ellipsis from 'src/components/Ellipsis'; ReactDOM.render( <div style={{ width: 200 }}> <Ellipsis tooltip lines={3}> {article} </Ellipsis> </div>, mountNode);//Ellipsis组件在antd-Table组件中
<Table.Column title="报告名称" dataIndex="reportname" render={(reportname) => { return ( <Ellipsis length={11} tooltip="true" > {reportname} </Ellipsis> ); }}/>时间格式化问题
moment函数实现：
import moment from 'moment';let startDate = moment('2018-09-27').format(YYYY-MM-DD);
格式化日期
//当前时间（年月日时分秒）moment().format('YYYY-MM-DD HH:mm:ss'); //2020-07-25 23:36:09//星期
moment().format('d'); //6
//相对时间
moment("20180701", "YYYYMMDD").fromNow(); //2 years ago
//三天前
moment().subtract('days',3).format('YYYY年MM月DD日'); //2020年07月23日
//三天后
moment().add('days',3).format('YYYY年MM月DD日'); //2020年07月28日
//三小时前
moment().subtract('hours',3).format('HH:mm:ss');
//三小时后
moment().add('hours',3).format('HH:mm:ss');
