给一个元素添加一个效果，不换行且元素文本过长显示不全超出当前元素宽度时，溢出时末尾显示三个点，鼠标悬浮元素时弹出tip气泡框提示完整内容, 未溢出时正常显示不需要悬浮显示气泡框提示。

Yatoo2018 commented 2 years ago

What problem does this feature solve?

文本过长时不好处理展示效果。

What does the proposed API look like?

nz-overflow 一个指令即可

zorro-bot[bot] commented 2 years ago

Translation of this issue:

When an element Chinese content shows incomplete overflow, three points are displayed at the end and the TIP air bubble box is popped up to prompt the complete content.

What PROBLEM DOES This Feature Solve?

When the text is too long, it is not easy to handle the display effect.

What does the proposed api look like?

NZ-OVERFLOW can instruction

caoxicheng commented 1 year ago

自己实现一个指令,通过修改样式不触发悬浮事件,来达到截停tooltip

缺点: 无法动态生效,动态也可以改成实施出发,不过一般不需要吧无法直接使用tooltip指令的开关,对应的方法都是内部属性,无法通过外部调用

@Directive({
  selector: '[nzOverflow]',
  host: {
      '[style.overflow]': "'hidden'",
      '[style.whiteSpace]': "'nowrap'",
      '[style.textOverflow]': "'ellipsis'",
      '[style.wordBreak]': "'break-all'"
 }
// 或者通过全局样式
// [nzOverflow] {
//     overflow: hidden;
//    white-space: nowrap;
//    text-overflow: ellipsis;
//    word-break: break-all;
// }
})
export class NzOverflowDirective implements AfterViewInit {
  constructor(
    private elementRef: ElementRef,
    private renderer2: Renderer2,
    @Optional() @Self() private tooltip:  NzTooltipDirective
  ) {}

  private isEllipsis(): boolean {
    const clientWidth = this.elementRef.nativeElement.clientWidth;
    const scrollWidth = this.elementRef.nativeElement.scrollWidth;
    return scrollWidth > clientWidth;
  }

  ngAfterViewInit(): void {
    // 不缩略并且存在tooltip指令
    if (!this.isEllipsis() && this.tooltip) {
      this.renderer2.setStyle(this.elementRef.nativeElement, 'pointer-events', 'none');
    }
  }
}

caoxicheng commented 1 year ago

此指令单独存在只等于缩略,需要配合tooltip

Laffery commented 1 year ago

nz-typography里的nzEllipsis + nz-tooltip应该可以满足你的需求吧

yinjiajun223 commented 6 days ago

基于@caoxicheng的思路在table nzEllipsis属性基础上动态创建一个toolTip组件兼容是因为之前的写法都是使用nzEllipsis + nz-tooltip实现的这种实现方式tooltip永远存在

NG-ZORRO / ng-zorro-antd