fix: Form labelWrap style when not required (ant-design#53552)

Author: pre1ude

components/form/__tests__/__snapshots__/demo-extend.test.ts.snap

@@ -9138,6 +9138,45 @@ exports[`renders components/form/demo/layout-can-wrap.tsx extend context correct
       </div>
     </div>
   </div>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-form-item-label ant-form-item-label-left ant-form-item-label-wrap"
+        style="flex: 0 0 110px;"
+      >
+        <label
+          class="ant-form-item-no-colon"
+          for="wrap_password1"
+          title="A super long label text"
+        >
+          A super long label text
+        </label>
+      </div>
+      <div
+        class="ant-col ant-form-item-control"
+        style="flex: 1 1 auto;"
+      >
+        <div
+          class="ant-form-item-control-input"
+        >
+          <div
+            class="ant-form-item-control-input-content"
+          >
+            <input
+              class="ant-input ant-input-outlined"
+              id="wrap_password1"
+              type="text"
+              value=""
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
   <div
     class="ant-form-item"
   >

components/form/__tests__/__snapshots__/demo.test.tsx.snap

@@ -5487,6 +5487,45 @@ exports[`renders components/form/demo/layout-can-wrap.tsx correctly 1`] = `
       </div>
     </div>
   </div>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-form-item-label ant-form-item-label-left ant-form-item-label-wrap"
+        style="flex:0 0 110px"
+      >
+        <label
+          class="ant-form-item-no-colon"
+          for="wrap_password1"
+          title="A super long label text"
+        >
+          A super long label text
+        </label>
+      </div>
+      <div
+        class="ant-col ant-form-item-control"
+        style="flex:1 1 auto"
+      >
+        <div
+          class="ant-form-item-control-input"
+        >
+          <div
+            class="ant-form-item-control-input-content"
+          >
+            <input
+              class="ant-input ant-input-outlined"
+              id="wrap_password1"
+              type="text"
+              value=""
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
   <div
     class="ant-form-item"
   >

components/form/demo/layout-can-wrap.tsx

@@ -19,6 +19,10 @@ const App: React.FC = () => (
       <Input />
     </Form.Item>
 
+    <Form.Item label="A super long label text" name="password1">
+      <Input />
+    </Form.Item>
+
     <Form.Item label=" ">
       <Button type="primary" htmlType="submit">
         Submit

components/form/style/index.ts

@@ -244,6 +244,11 @@ const genFormItemStyle: GenerateStyle<FormToken> = (token) => {
           overflow: 'unset',
           lineHeight: token.lineHeight,
           whiteSpace: 'unset',
+
+          '> label': {
+            verticalAlign: 'middle',
+            textWrap: 'balance',
+          },
         },
 
         '> label': {