From 91fd8cab8ea4619de686108be4282e928881323a Mon Sep 17 00:00:00 2001
From: Yadong Xie <vthinkxie@users.noreply.github.com>
Date: Fri, 11 Oct 2019 15:43:57 +0800
Subject: [PATCH] feat(module:table): support td break-word display (#4273)

---
 components/table/demo/break-word.md       | 15 +++++++
 components/table/demo/break-word.ts       | 54 +++++++++++++++++++++++
 components/table/demo/dynamic-settings.md |  2 +-
 components/table/doc/index.en-US.md       |  1 +
 components/table/doc/index.zh-CN.md       |  1 +
 components/table/nz-td.component.ts       |  4 +-
 6 files changed, 75 insertions(+), 2 deletions(-)
 create mode 100644 components/table/demo/break-word.md
 create mode 100644 components/table/demo/break-word.ts

diff --git a/components/table/demo/break-word.md b/components/table/demo/break-word.md
new file mode 100644
index 00000000000..c57aca180d6
--- /dev/null
+++ b/components/table/demo/break-word.md
@@ -0,0 +1,15 @@
+---
+order: 26
+title:
+  en-US: Break Word
+  zh-CN: 折行显示
+---
+
+## zh-CN
+
+当 `td` 内容超出 `nzWidth` 设定值时使用 `nzBreakWord` 折行显示
+
+## en-US
+
+Insert line breaks within words with `nzBreakWord` to prevent text from overflowing its content box
+
diff --git a/components/table/demo/break-word.ts b/components/table/demo/break-word.ts
new file mode 100644
index 00000000000..aae9043a2ba
--- /dev/null
+++ b/components/table/demo/break-word.ts
@@ -0,0 +1,54 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'nz-demo-table-break-word',
+  template: `
+    <nz-table #fixedTable [nzData]="listOfData" [nzScroll]="{ x: '1150px', y: '240px' }">
+      <thead>
+        <tr>
+          <th nzWidth="150px" nzLeft="0px">Full Name</th>
+          <th nzWidth="100px" nzLeft="150px">Age</th>
+          <th nzWidth="100px">Column 1</th>
+          <th nzWidth="100px">Column 2</th>
+          <th nzWidth="100px">Column 3</th>
+          <th nzWidth="100px">Column 4</th>
+          <th nzWidth="100px">Column 5</th>
+          <th nzWidth="100px">Column 6</th>
+          <th nzWidth="100px">Column 7</th>
+          <th nzWidth="100px">Column 8</th>
+          <th nzWidth="100px" nzRight="0px">Action</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr *ngFor="let data of fixedTable.data">
+          <td nzBreakWord nzLeft="0px">{{ data.name }}</td>
+          <td nzBreakWord nzLeft="150px">{{ data.age }}</td>
+          <td nzBreakWord>{{ data.address }}</td>
+          <td nzBreakWord>{{ data.address }}</td>
+          <td nzBreakWord>{{ data.address }}</td>
+          <td nzBreakWord>{{ data.address }}</td>
+          <td nzBreakWord>{{ data.address }}</td>
+          <td nzBreakWord>{{ data.address }}</td>
+          <td nzBreakWord>{{ data.address }}</td>
+          <td nzBreakWord>{{ data.address }}</td>
+          <td nzBreakWord nzRight="0px">
+            <a>action</a>
+          </td>
+        </tr>
+      </tbody>
+    </nz-table>
+  `
+})
+export class NzDemoTableBreakWordComponent implements OnInit {
+  listOfData: any[] = [];
+
+  ngOnInit(): void {
+    for (let i = 0; i < 100; i++) {
+      this.listOfData.push({
+        name: `Edward King ${i} Edward King ${i} Edward King ${i}`,
+        age: 32,
+        address: `LondonLondonLondonLondonLondon`
+      });
+    }
+  }
+}
diff --git a/components/table/demo/dynamic-settings.md b/components/table/demo/dynamic-settings.md
index f19f5d3cece..f272467851e 100644
--- a/components/table/demo/dynamic-settings.md
+++ b/components/table/demo/dynamic-settings.md
@@ -1,5 +1,5 @@
 ---
-order: 26
+order: 27
 title:
   en-US: Dynamic Settings
   zh-CN: 动态控制表格属性
diff --git a/components/table/doc/index.en-US.md b/components/table/doc/index.en-US.md
index c16e76c715f..529ab835c6a 100644
--- a/components/table/doc/index.en-US.md
+++ b/components/table/doc/index.en-US.md
@@ -139,6 +139,7 @@ Style property
 | `[nzLeft]` | Left pixels, used to fixed column to left | `string` | - |
 | `[nzRight]` | Right pixels, used to fixed column to right | `string` | - |
 | `[nzAlign]` | Specify how content is aligned | `'left' \| 'right' \| 'center'` | - |
+| `[nzBreakWord]` | Whether insert line breaks within words | `boolean` | `false` |
 
 Other property
 
diff --git a/components/table/doc/index.zh-CN.md b/components/table/doc/index.zh-CN.md
index 62563aa609f..9ca6c90d768 100644
--- a/components/table/doc/index.zh-CN.md
+++ b/components/table/doc/index.zh-CN.md
@@ -180,6 +180,7 @@ Table 组件同时具备了易用性和高度可定制性
 | `[nzLeft]` | 左侧距离，用于固定左侧列 | `string` | - |
 | `[nzRight]` | 右侧距离，用于固定右侧列 | `string` | - |
 | `[nzAlign]` | 设置列内容的对齐方式 | `'left' \| 'right' \| 'center'` | - |
+| `[nzBreakWord]` | 是否折行显示 | `boolean` | `false` |
 
 其他
 
diff --git a/components/table/nz-td.component.ts b/components/table/nz-td.component.ts
index 6f3ba88d7e2..7217c39cd73 100644
--- a/components/table/nz-td.component.ts
+++ b/components/table/nz-td.component.ts
@@ -31,7 +31,8 @@ import { isNotNil, InputBoolean, NzUpdateHostClassService } from 'ng-zorro-antd/
   host: {
     '[style.left]': 'nzLeft',
     '[style.right]': 'nzRight',
-    '[style.text-align]': 'nzAlign'
+    '[style.text-align]': 'nzAlign',
+    '[style.word-break]': `nzBreakWord ? 'break-all' : ''`
   }
 })
 export class NzTdComponent implements OnChanges {
@@ -45,6 +46,7 @@ export class NzTdComponent implements OnChanges {
   @Input() @InputBoolean() nzExpand = false;
   @Input() @InputBoolean() nzShowExpand = false;
   @Input() @InputBoolean() nzShowCheckbox = false;
+  @Input() @InputBoolean() nzBreakWord = false;
   @Output() readonly nzCheckedChange = new EventEmitter<boolean>();
   @Output() readonly nzExpandChange = new EventEmitter<boolean>();