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

text-ellipsis 组件

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

@Component({
  selector:"ellipsis",
  template:`
    
  `,
  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";
}

使用方式

一行

  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!

两行

  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!

三行

  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!