mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-11 23:00:20 +08:00
72ee4517f0
* chore: init * chore: ellpsis check with native css * docs: all the lines * chore: move copied btn out * chore: add dpes * fix: logic order * fix: ellipsis event * test: update testcase * chore: use native way * chore: destructure * chore: fix lint * chore: fix lint * chore: fix lint
28 lines
799 B
TypeScript
28 lines
799 B
TypeScript
import React from 'react';
|
|
import { Typography } from 'antd';
|
|
|
|
const { Text } = Typography;
|
|
|
|
const EllipsisMiddle: React.FC<{ suffixCount: number; children: string }> = ({
|
|
suffixCount,
|
|
children,
|
|
}) => {
|
|
const start = children.slice(0, children.length - suffixCount);
|
|
const suffix = children.slice(-suffixCount).trim();
|
|
return (
|
|
<Text style={{ maxWidth: '100%' }} ellipsis={{ suffix }}>
|
|
{start}
|
|
</Text>
|
|
);
|
|
};
|
|
|
|
const App: React.FC = () => (
|
|
<EllipsisMiddle suffixCount={12}>
|
|
In the process of internal desktop applications development, many different design specs and
|
|
implementations would be involved, which might cause designers and developers difficulties and
|
|
duplication and reduce the efficiency of development.
|
|
</EllipsisMiddle>
|
|
);
|
|
|
|
export default App;
|