feat(module:table): support td break-word display (#4273)

NG-ZORRO · Oct 11, 2019 · 93ab305 · 93ab305
1 parent 51f4713
commit 93ab305
Show file tree

Hide file tree

Showing 6 changed files with 75 additions and 2 deletions.
diff --git a/components/table/demo/break-word.md 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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>();