feat(module:typography): support nzSuffix property

close NG-ZORRO#4620

components/core/util/text-measure.ts

@@ -62,7 +62,8 @@ export function measure(
   rows: number,
   contentNodes: Node[],
   fixedContent: HTMLElement[],
-  ellipsisStr: string
+  ellipsisStr: string,
+  suffixStr: string = ''
 ): { contentNodes: Node[]; text: string; ellipsis: boolean } {
   if (!ellipsisContainer) {
     ellipsisContainer = document.createElement('div');
@@ -94,6 +95,7 @@ export function measure(
   const contentList = mergeChildren(contentNodes);
   const container = document.createElement('div');
   const contentContainer = document.createElement('span');
+  const suffixContainer = document.createTextNode(suffixStr);
   const fixedContainer = document.createElement('span');
 
   // Add styles in container
@@ -104,6 +106,9 @@ export function measure(
   contentList.forEach(n => {
     contentContainer.appendChild(n);
   });
+
+  contentContainer.appendChild(suffixContainer);
+
   fixedContent.forEach(node => {
     fixedContainer.appendChild(node.cloneNode(true));
   });
@@ -137,7 +142,7 @@ export function measure(
   // Create origin content holder
   const ellipsisContentHolder = document.createElement('span');
   ellipsisContainer.appendChild(ellipsisContentHolder);
-  const ellipsisTextNode = document.createTextNode(ellipsisStr);
+  const ellipsisTextNode = document.createTextNode(ellipsisStr + suffixStr);
   ellipsisContentHolder.appendChild(ellipsisTextNode);
 
   fixedNodes.forEach(childNode => {
@@ -158,16 +163,15 @@ export function measure(
     lastSuccessLoc: number = 0
   ): MeasureResult {
     const midLoc = Math.floor((startLoc + endLoc) / 2);
-    const currentText = fullText.slice(0, midLoc);
-    textNode.textContent = currentText;
+    textNode.textContent = fullText.slice(0, midLoc);
 
     if (startLoc >= endLoc - 1) {
       // Loop when step is small
       for (let step = endLoc; step >= startLoc; step -= 1) {
         const currentStepText = fullText.slice(0, step);
         textNode.textContent = currentStepText;
 
-        if (inRange()) {
+        if (inRange() || !currentStepText) {
           return step === fullText.length
             ? {
                 finished: false,

components/typography/demo/module

@@ -1,4 +1,5 @@
 import { NzTypographyModule } from 'ng-zorro-antd/typography';
 import { NzDividerModule } from 'ng-zorro-antd/divider';
+import { NzSliderModule } from 'ng-zorro-antd/slider';
 
-export const moduleList = [ NzTypographyModule, NzDividerModule ];
+export const moduleList = [ NzTypographyModule, NzDividerModule, NzSliderModule ];

components/typography/demo/suffix.md

@@ -0,0 +1,14 @@
+---
+order: 6
+title:
+  zh-CN: 后缀
+  en-US: suffix
+---
+
+## zh-CN
+
+添加后缀的省略。
+
+## en-US
+
+add suffix ellipsis support.

components/typography/demo/suffix.ts

@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'nz-demo-typography-suffix',
+  template: `
+    <nz-slider [(ngModel)]="rows" [nzMax]="10" [nzMin]="1"></nz-slider>
+    <p nz-paragraph nzEllipsis [nzEllipsisRows]="rows" [nzSuffix]="suffix">{{ content }}</p>
+  `
+})
+export class NzDemoTypographySuffixComponent {
+  content =
+    'To be, or not to be, that is a question: Whether it is nobler in the mind to suffer. The slings and arrows of outrageous fortune';
+  suffix = '--William Shakespeare';
+  rows = 1;
+}

components/typography/doc/index.en-US.md

@@ -24,6 +24,7 @@ Basic text writing, including headings, body text, lists, and more.
 | `[nzCopyable]` | Can copy, require use `[nzContent]` | `boolean` | `false` ||
 | `[nzEditable]` | Editable, require use `[nzContent]` | `boolean` | `false` ||
 | `[nzEllipsis]` | Display ellipsis when overflow, require use `[nzContent]` when dynamic content | `boolean` | `false` ||
+| `[nzSuffix]` | Set the text suffix | `string` | - ||
 | `[nzCopyText]` | Customize the copy text | `string` | - ||
 | `[nzDisabled]` | Disable content | `boolean` | `false` ||
 | `[nzExpandable]` | Expandable when ellipsis | `boolean` | `false` ||

components/typography/doc/index.zh-CN.md

@@ -22,9 +22,10 @@ cols: 1
 | --- | --- | --- | --- | --- |
 | `[nzContent]` | 组件内容 | `string` | - |
 | `[nzCopyable]` | 是否可拷贝，需要配合 `[nzContent]` 使用 | `boolean` | `false` |
-| `[nzEditable]` | 是否可编辑，是否可拷贝，需要配合 `[nzContent]` 使用 | `boolean` | `false` |
+| `[nzEditable]` | 是否可编辑，需要配合 `[nzContent]` 使用 | `boolean` | `false` |
 | `[nzEllipsis]` | 自动溢出省略，动态内容时需要配合 `[nzContent]` 使用 | `boolean` | `false` |
 | `[nzExpandable]` | 自动溢出省略时是否可展开 | `boolean` | `false` |
+| `[nzSuffix]` | 设置文本后缀 | `string` | - |
 | `[nzCopyText]` | 自定义被拷贝的文本 | `string` | - |
 | `[nzDisabled]` | 禁用文本 | `boolean` | `false` |
 | `[nzEllipsisRows]` | 自动溢出省略时省略行数 | `number` | `1` | ✅ |

components/typography/nz-typography.component.html

@@ -4,15 +4,18 @@
 </ng-template>
 
 <ng-container *ngIf="!editing">
-  <ng-container *ngIf="expanded || (!nzExpandable && nzEllipsisRows === 1) || canCssEllipsis">
+  <ng-container
+    *ngIf="expanded || (!nzExpandable && !nzSuffix && nzEllipsisRows === 1) || canCssEllipsis"
+  >
     <ng-template
       [ngTemplateOutlet]="contentTemplate"
       [ngTemplateOutletContext]="{ content: nzContent }"
     ></ng-template>
   </ng-container>
-  <ng-container *ngIf="nzEllipsis && !expanded && (nzEllipsisRows > 1 || nzExpandable)">
+  <ng-container *ngIf="nzEllipsis && !expanded && (nzEllipsisRows > 1 || nzExpandable || nzSuffix)">
     <span #ellipsisContainer></span>
     <ng-container *ngIf="isEllipsis">{{ ellipsisStr }}</ng-container>
+    <ng-container *ngIf="nzSuffix">{{ nzSuffix }}</ng-container>
     <a
       #expandable
       *ngIf="nzExpandable && isEllipsis"

components/typography/nz-typography.component.ts

@@ -85,6 +85,7 @@ export class NzTypographyComponent implements OnInit, AfterViewInit, OnDestroy,
   @Input() @WithConfig(NZ_CONFIG_COMPONENT_NAME, 1) @InputNumber() nzEllipsisRows: number;
   @Input() nzType: 'secondary' | 'warning' | 'danger' | undefined;
   @Input() nzCopyText: string | undefined;
+  @Input() nzSuffix: string | undefined;
   @Output() readonly nzContentChange = new EventEmitter<string>();
   @Output() readonly nzCopy = new EventEmitter<string>();
   @Output() readonly nzExpandChange = new EventEmitter<void>();
@@ -100,7 +101,7 @@ export class NzTypographyComponent implements OnInit, AfterViewInit, OnDestroy,
   editing = false;
   ellipsisText: string | undefined;
   cssEllipsis: boolean = false;
-  isEllipsis: boolean = false;
+  isEllipsis: boolean = true;
   expanded: boolean = false;
   ellipsisStr = '...';
 
@@ -149,7 +150,7 @@ export class NzTypographyComponent implements OnInit, AfterViewInit, OnDestroy,
   }
 
   canUseCSSEllipsis(): boolean {
-    if (this.nzEditable || this.nzCopyable || this.nzExpandable) {
+    if (this.nzEditable || this.nzCopyable || this.nzExpandable || this.nzSuffix) {
       return false;
     }
     if (this.nzEllipsisRows === 1) {
@@ -188,13 +189,13 @@ export class NzTypographyComponent implements OnInit, AfterViewInit, OnDestroy,
     }
     const { viewRef, removeView } = this.getOriginContentViewRef();
     const fixedNodes = [this.textCopyRef, this.textEditRef, this.expandableBtn].filter(e => e && e.nativeElement).map(e => e.nativeElement);
-
     const { contentNodes, text, ellipsis } = measure(
       this.host.nativeElement,
       this.nzEllipsisRows,
       viewRef.rootNodes,
       fixedNodes,
-      this.ellipsisStr
+      this.ellipsisStr,
+      this.nzSuffix
     );
 
     removeView();
@@ -239,8 +240,8 @@ export class NzTypographyComponent implements OnInit, AfterViewInit, OnDestroy,
   }
 
   ngOnChanges(changes: SimpleChanges): void {
-    const { nzCopyable, nzEditable, nzExpandable, nzEllipsis, nzContent, nzEllipsisRows } = changes;
-    if (nzCopyable || nzEditable || nzExpandable || nzEllipsis || nzContent || nzEllipsisRows) {
+    const { nzCopyable, nzEditable, nzExpandable, nzEllipsis, nzContent, nzEllipsisRows, nzSuffix } = changes;
+    if (nzCopyable || nzEditable || nzExpandable || nzEllipsis || nzContent || nzEllipsisRows || nzSuffix) {
       if (this.nzEllipsis) {
         if (this.expanded) {
           this.windowResizeSubscription.unsubscribe();