mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-05 09:49:57 +08:00
28 lines
806 B
TypeScript
28 lines
806 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).trim();
|
||
|
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;
|