CSS text truncation - -> to force his party ellipsis ...

A single line of text truncated text-overflow

Text overflow frequently used should be that  text-overflow:ellipsis of just a few lines of code can easily implement single-line text truncation.

<style>
div {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>

Two, -webkit-line-clamp achieve

<style>
div {
  /* autoprefixer: ignore next */   
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
</style>

PS:
 

It needs to display, -webkit-box-orient and overflow combination:

display: -webkit-box; have binding properties, as the elastically stretchable object model display box.

-webkit-box-orient; arrangement of sub-elements must be combined attributes set or retrieve objects telescopic cartridge.

text-overflow: ellipsis; optional attribute case, multiple lines of text can be used, with ellipsis "..." hidden text out of range.

Third, the positioning element multi-line text truncation

<style>
p {
    position: relative;
    line-height: 
    18px;
    height: 
    36px;
    overflow: hidden;
}
p::after {
    content:"...";
    font-weight:bold;
    position:absolute;
    bottom:0;
    right:0;
    padding:0 20px 1px 45px;
/* 为了展示效果更好 */
    background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(white), color-stop(50%, white));
    background: -moz-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
    background: -o-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
    background: -ms-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
    background: linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
}
</style>