ant-design/components/typography/demo/ellipsis-debug.md

---
order: 99
title:
  zh-CN: 省略号 Debug
  en-US: Ellipsis Debug
debug: true
---

## zh-CN

多行文本省略。

## en-US

Multiple line ellipsis support.

```jsx
import { Typography, Slider, Switch } from 'antd';

const { Text, Paragraph } = Typography;

class Demo extends React.Component {
  state = {
    rows: 1,
    longText: true,
    copyable: false,
    editable: false,
    expandable: false,
  };

  onChange = rows => {
    this.setState({ rows });
  };

  render() {
    const { rows, longText, copyable, editable, expandable } = this.state;
    return (
      <div>
        <Switch
          checked={longText}
          checkedChildren="Long Text"
          onChange={val => this.setState({ longText: val })}
        />
        <Switch onChange={val => this.setState({ copyable: val })} />
        <Switch onChange={val => this.setState({ editable: val })} />
        <Switch onChange={val => this.setState({ expandable: val })} />
        <Slider value={rows} min={1} max={10} onChange={this.onChange} />

        {longText ? (
          <Paragraph ellipsis={{ rows, expandable }} copyable={copyable} editable={editable}>
            Ant Design, a design language for background applications, is refined by Ant UED Team.
            This is a nest sample{' '}
            <Text code strong delete>
              Test
            </Text>{' '}
            case.
            {
              'Bnt Design, a design language for background applications, is refined by Ant UED Team.'
            }
            Cnt Design, a design language for background applications, is refined by Ant UED Team.
            Dnt Design, a design language for background applications, is refined by Ant UED Team.
            Ent Design, a design language for background applications, is refined by Ant UED Team.
          </Paragraph>
        ) : (
          <Paragraph ellipsis={{ rows, expandable }} copyable={copyable} editable={editable}>
            {'Hello'}
            {'World'}
          </Paragraph>
        )}
      </div>
    );
  }
}

ReactDOM.render(<Demo />, mountNode);
```