過剰な長さと省略の問題
制限長を超えた場合は、... を使用します。マウスオーバーでコンテンツ全体が表示されることを示します。
オーバーフロー
値: visible | hidden | scroll | auto | inherit
初期値：可視
適用対象：ブロックレベル要素、置換要素、テーブルセル
後継者：なし
// *.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;//テキストを強制的に1行に表示する overflow: hidden;//テキストのオーバーフロー表示 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',//テキストを強制的に1行に表示する text-overflow:省略記号,//テキストのオーバーフロー表示 overflow:'hidden',//オーバーフロー内容の非表示 max-width:'100px'//テキストが非表示にならない幅を定義する }} > {classname} </span> ); }}/>
省略テキスト自動省略
| tooltip | テキストに移動して全内容を表示するためのヒント | boolean | - |
| length | 長さに応じて傍受されるテキストの最大文字数。これを超えると傍受は省略されます。 | number | - |
| 行 | インターセプトの対象となる行の最大数は行単位で、それ以上の場合はインターセプトは省略されます。 | number | |
| - | 文字列の長さを計算する際に、全角文字の長さを 2 として扱うかどうか。 | ブーリアン | - |
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> ); }}/>
時刻書式の問題
import moment from 'moment';let startDate = moment('').format(YYYY-MM-DD);
書式付き日付
//現在の時刻moment().format('YYYY-MM-DD HH:mm:ss'); // //
moment().format('d'); //6
//相対時間
moment("", "YYYYMMDD").fromNow(); //2 years ago
//
moment().subtract('days',3).format('YYYY年 MM 月 DD '); //
//
moment().add('days',3).format('YYYY年 MM 月 DD 日'); //日
//3時間前
moment().subtract('hours',3).format('HH:mm:ss');
//3時間後
moment().add('hours',3).format('HH:mm:ss');
