css logra la visualización de puntos suspensivos y control de texto más allá de la parte

<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 se utiliza para limitar el número de líneas de texto que se muestran en un elemento de bloque. Para lograr este efecto, necesita combinar otras propiedades de WebKit. Propiedades de unión comunes:

display: -webkit-box; Los atributos que deben combinarse para mostrar el objeto como un modelo de caja elástica.

-webkit-box-orient debe combinarse con los atributos para establecer o recuperar la disposición de los elementos secundarios del objeto de caja telescópica.