美文网首页
Angular2~6 Text-Ellipsis 多行文本显示组

Angular2~6 Text-Ellipsis 多行文本显示组

作者: niccky | 来源:发表于2018-11-26 22:59 被阅读0次

text-ellipsis 组件

import {Component,HostBinding,Input} from '@angular/core';

@Component({
  selector:"ellipsis",
  template:`
    <ng-content></ng-content>
  `,
  host:{
   "style":`display:-webkit-box;
   -webkit-line-clamp:1;
   overflow:hidden;
   -webkit-box-orient:vertical; 
   word-break:break-all;`
  }
})
export class TextComponent {
  @Input() 
  @HostBinding("style.-webkit-line-clamp")
  lines:number = 1;

  @Input()
  @HostBinding("style.width")
  width:any="auto";
}

使用方式

一行

<ellipsis lines="1" width="300px" >
  Lorem ipsum dolor sit, amet consectetur adipisicing elit. Illo delectus repellat quisquam sint, animi a corrupti repudiandae vero dolorem consectetur libero modi nostrum facilis nobis, praesentium porro quibusdam sequi officia?
  Lorem, ipsum dolor sit amet consectetur adipisicing elit. Debitis exercitationem repellendus dolor cumque velit recusandae vitae corporis, possimus non odit sit a suscipit doloribus quasi alias? Amet similique inventore tenetur!
</ellipsis>

两行

<p>
<ellipsis lines="2" width="300px" >
  Lorem ipsum dolor sit, amet consectetur adipisicing elit. Illo delectus repellat quisquam sint, animi a corrupti repudiandae vero dolorem consectetur libero modi nostrum facilis nobis, praesentium porro quibusdam sequi officia?
  Lorem, ipsum dolor sit amet consectetur adipisicing elit. Debitis exercitationem repellendus dolor cumque velit recusandae vitae corporis, possimus non odit sit a suscipit doloribus quasi alias? Amet similique inventore tenetur!
</ellipsis>
</p>
<p>

三行

<ellipsis lines="3" width="300px" >
  Lorem ipsum dolor sit, amet consectetur adipisicing elit. Illo delectus repellat quisquam sint, animi a corrupti repudiandae vero dolorem consectetur libero modi nostrum facilis nobis, praesentium porro quibusdam sequi officia?
  Lorem, ipsum dolor sit amet consectetur adipisicing elit. Debitis exercitationem repellendus dolor cumque velit recusandae vitae corporis, possimus non odit sit a suscipit doloribus quasi alias? Amet similique inventore tenetur!
</ellipsis>
</p>

相关文章

网友评论

      本文标题:Angular2~6 Text-Ellipsis 多行文本显示组

      本文链接:https://www.haomeiwen.com/subject/tbziqqtx.html