当文本有省略号时如何显示 "show more" 按钮?
How to show "show more" button when text has ellipsis?
在发布此问题之前,我已经在 Google 和此处进行了搜索。
我找到了解决问题的几种方法,但其中 none 符合我的需要。
这是我的代码:Plunker
<div *ngIf="description.length > 200" class="ui mini compact buttons expand">
<button class="ui button" (click)="showMore($event)">Show more</button>
</div>
"show more" 按钮仅在文本长度超过 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" 按钮。
我怎样才能让我的解决方案在任何情况下都有效?您知道解决该问题的解决方法或最佳解决方案吗?
编辑可能的解决方案:
//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 正常工作:
我推荐使用 "ng2-truncate"。
使用此组件,您可以根据长度或字数或其他内容截断代码。
希望这个组件对你有所帮助。
在发布此问题之前,我已经在 Google 和此处进行了搜索。 我找到了解决问题的几种方法,但其中 none 符合我的需要。
这是我的代码:Plunker
<div *ngIf="description.length > 200" class="ui mini compact buttons expand">
<button class="ui button" (click)="showMore($event)">Show more</button>
</div>
"show more" 按钮仅在文本长度超过 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" 按钮。
我怎样才能让我的解决方案在任何情况下都有效?您知道解决该问题的解决方法或最佳解决方案吗?
编辑可能的解决方案:
//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 正常工作:
我推荐使用 "ng2-truncate"。
使用此组件,您可以根据长度或字数或其他内容截断代码。
希望这个组件对你有所帮助。