Question

在发布此问题之前，我已经在谷歌上搜索了这里。我找到了几个问题的解决方案，但没有一个能满足我的需求。

这是我的代码：Plunker

    <div *ngIf="description.length > 200" class="ui mini compact buttons expand">
        <button class="ui button" (click)="showMore($event)">Show more</button>
    </div>

仅当文本长度超过200个字符时，才会显示“显示更多”按钮。你可以看到它似乎是一个很好的解决方案。

showMore(event: any) {
    $(event.target).text((i, text) => { return text === "Show more" ? "Show less" : "Show more";    });
    $(event.target).parent().prev().find('.detail-value').toggleClass('text-ellipsis');
}

无论如何，我可能有一个长度不是200个字符并且不符合SPAN元素的文本，然后它有省略号，但“show more”按钮不会出现。

如何在任何情况下使我的解决方案都有效？您知道解决方法或解决方案的最佳解决方案吗？

Answer 1

使用可能的解决方案进行编辑：

//our root app component
import {Component, NgModule, VERSION, OnInit} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import {ElementRef,ViewChild} from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
    <div class="ui segment detail-container" (window:resize)="checkOverflow(span)">
      <span class="title-container" role="heading">User details</span>
      <div class="detail-group">
        <div class="detail-element">
          <span class="detail-label">Name</span>
          <span class="detail-value">John</span>
        </div>
        <div class="detail-element">
          <span class="detail-label">Surname</span>
          <span class="detail-value">Smith</span>
        </div>
      </div>

      <div class="detail-group">
        <div class="detail-element">
          <span class="detail-label">Description</span>
          <span #span class="detail-value text-ellipsis">{{description}}</span>
        </div>
        <div class="ui mini compact buttons expand">
            <button  *ngIf="checkOverflow(span) && showMoreFlag" class="ui button" (click)="showMore($event)">Show more</button>
            <button  *ngIf="!showMoreFlag" class="ui button" (click)="showMore($event)">Show less</button>
        </div>
      </div>
    </div>
  `,
  styleUrls: ['src/app.css']
})



export class App implements OnInit {
  description: string = 'Lorem ipsum dolor sit a ';
  showMoreFlag:boolean = true;

  constructor() {
  }

  ngOnInit(): void {
    this.overflowOcurs = this.checkOverflow(this.el.nativeElement);
  }

  showMore(event: any) {
        this.showMoreFlag = !this.showMoreFlag;
        $(event.target).parent().prev().find('.detail-value').toggleClass('text-ellipsis');
    }

    checkOverflow (element) {
    if (element.offsetHeight < element.scrollHeight ||
        element.offsetWidth < element.scrollWidth) {
      return true;
    } else {
      return false;
    }
  }
}

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ App ],
  bootstrap: [ App ]
})
export class AppModule {}

Plunker正常工作：

https://plnkr.co/edit/HCd6ds5RBYvlcmUtdvKr

Answer 2

我建议使用“ng2-truncate”。

使用此组件，您可以使用长度或字数或其他内容截断代码。

我希望这个组件可以帮助你。

Plunker

npm

文本有省略号时如何显示“显示更多”按钮？

2 个答案: