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>