Javascript “如何显示”;“显示更多”;文本有省略号时的按钮?
在发布这个问题之前,我已经在谷歌和这里搜索过了。 我已经找到了几种解决我问题的方法,但没有一种适合我的需要 这是我的密码: 无论如何,我可以有一个不是200个字符长的文本,它不适合SPAN元素,然后它有省略号,但“显示更多”按钮不会出现Javascript “如何显示”;“显示更多”;文本有省略号时的按钮?,javascript,html,css,angular,ellipsis,Javascript,Html,Css,Angular,Ellipsis,在发布这个问题之前,我已经在谷歌和这里搜索过了。 我已经找到了几种解决我问题的方法,但没有一种适合我的需要 这是我的密码: 无论如何,我可以有一个不是200个字符长的文本,它不适合SPAN元素,然后它有省略号,但“显示更多”按钮不会出现 我怎样才能使我的解决方案在任何情况下都有效?您知道解决此问题的变通方法或最佳解决方案吗?使用可能的解决方案编辑: //our root app component import {Component, NgModule, VERSION, OnInit} fr
我怎样才能使我的解决方案在任何情况下都有效?您知道解决此问题的变通方法或最佳解决方案吗?使用可能的解决方案编辑:
//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 {}
//我们的根应用程序组件
从“@angular/core”导入{Component,NgModule,VERSION,OnInit}
从“@angular/platform browser”导入{BrowserModule}
从“@angular/core”导入{ElementRef,ViewChild};
@组成部分({
选择器:“我的应用程序”,
模板:`
用户详细信息
名称
约翰
姓
史密斯
描述
{{description}}
显示更多
少展示
`,
样式URL:['src/app.css']
})
导出类应用程序实现OnInit{
描述:字符串='Lorem ipsum dolor sit a';
showMoreFlag:boolean=true;
构造函数(){
}
ngOnInit():void{
this.overflowOcurs=this.checkOverflow(this.el.nativeElement);
}
showMore(事件:任何){
this.showMoreFlag=!this.showMoreFlag;
$(event.target).parent().prev().find('.detail value').toggleClass('text-省略号');
}
检查溢出(元素){
如果(element.offsetHeight
Plunker工作正常:
我建议使用“ng2截断”
使用此组件,您可以使用长度、字数或其他方式截断代码
我希望这个组件对您有所帮助
长度还是单词?“线条呢?”smartmouse。它不支持行,但支持最大长度或字数筛选器。{{“abcdefghijkl”| truncate:3}=>abc。。。或者{“abcd-ef-gh”| words:2}=>abcd-ef..那就不是我要找的了。无论如何,谢谢你。转到此链接并克隆源代码,然后更改支持行的分隔符。如果我可以这样做,我就不需要在此处创建问题:)这可能是我问题的解决方案,无论如何,这不是我要找的。那么你要找的是什么?如果你能给我解释一下,我可以帮你!我正在寻找一种在出现省略号时显示“显示更多”按钮的方法,而不是在字符长度上。谢谢你的回答,但如果你调整页面大小,它将不起作用:(这很容易解决。我编辑了,你可以检查结果。
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');
}
//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 {}