css achieves the display of ellipsis and control text beyond the part

<div class="content">css实现超出部分显示省略号，控制文字css实现超出部分显示省略号，控制文字</div>

 

/* 显示一行，省略号 */
    .content{
        width:200px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        word-break: break-all;
    }
/* 显示两行，省略号 */
 .content{
    width:200px;
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}

 

-webkit-line-clamp is used to limit the number of lines of text displayed in a block element. In order to achieve this effect, it needs to combine other WebKit properties. Common binding properties:

display: -webkit-box; The attributes that must be combined to display the object as an elastic box model.

-webkit-box-orient must be combined with the attributes to set or retrieve the arrangement of the child elements of the telescopic box object.