ant-design/components/form/demo/layout-can-wrap.md
2022-05-23 14:37:16 +08:00

48 lines
896 B
Markdown

---
order: 3.2
title:
zh-CN: 表单标签可换行
en-US: label can wrap
version: 4.18.0
---
## zh-CN
使用 `labelWrap` 可以开启 `label` 换行。
## en-US
Turn on `labelWrap` to wrap label if text is long.
```tsx
import { Button, Form, Input } from 'antd';
import React from 'react';
const App: React.FC = () => (
<Form
name="wrap"
labelCol={{ flex: '110px' }}
labelAlign="left"
labelWrap
wrapperCol={{ flex: 1 }}
colon={false}
>
<Form.Item label="正常标签文案" name="username" rules={[{ required: true }]}>
<Input />
</Form.Item>
<Form.Item label="超长标签文案超长标签文案" name="password" rules={[{ required: true }]}>
<Input />
</Form.Item>
<Form.Item label=" ">
<Button type="primary" htmlType="submit">
Submit
</Button>
</Form.Item>
</Form>
);
export default App;
```