fix(module:typography): ellipsis does not work with copy action (#6058)

close #6057
NG-ZORRO · Nov 16, 2020 · 858fff9 · 858fff9
1 parent 32eeb78
commit 858fff9
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 1 deletion.
diff --git a/components/typography/demo/ellipsis.ts b/components/typography/demo/ellipsis.ts
@@ -3,6 +3,16 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'nz-demo-typography-ellipsis',
   template: `
+    <p
+      nz-typography
+      nzEllipsis
+      nzCopyable
+      nzContent="Ant Design, a design language for background applications, is refined by Ant UED Team. Ant Design, a design language for background
+      applications, is refined by Ant UED Team. Ant Design, a design language for background applications, is refined by Ant UED Team. Ant
+      Design, a design language for background applications, is refined by Ant UED Team. Ant Design, a design language for background
+      applications, is refined by Ant UED Team. Ant Design"
+    ></p>
+    <br />
     <p nz-typography nzEllipsis>
       Ant Design, a design language for background applications, is refined by Ant UED Team. Ant Design, a design language for background
       applications, is refined by Ant UED Team. Ant Design, a design language for background applications, is refined by Ant UED Team. Ant

diff --git a/components/typography/typography.component.ts b/components/typography/typography.component.ts
@@ -60,7 +60,10 @@ const EXPAND_ELEMENT_CLASSNAME = 'ant-typography-expand';
     <ng-container *ngIf="!editing">
       <ng-container
         *ngIf="
-          expanded || (!nzExpandable && nzEllipsisRows === 1 && !hasEllipsisObservers) || canCssEllipsis || (nzSuffix && expanded);
+          expanded ||
+            (!hasOperationsWithEllipsis && nzEllipsisRows === 1 && !hasEllipsisObservers) ||
+            canCssEllipsis ||
+            (nzSuffix && expanded);
           else jsEllipsis
         "
       >
@@ -163,6 +166,10 @@ export class NzTypographyComponent implements OnInit, AfterViewInit, OnDestroy,
     return this.nzEllipsis && this.cssEllipsis && !this.expanded && !this.hasEllipsisObservers;
   }
 
+  get hasOperationsWithEllipsis(): boolean {
+    return (this.nzCopyable || this.nzEditable || this.nzExpandable) && this.nzEllipsis;
+  }
+
   private viewInit = false;
   private rfaId: number = -1;
   private destroy$ = new Subject();