cssは省略記号と制御テキストの表示を実現します。

<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は、ブロック要素に表示されるテキストの行数を制限するために使用されます。この効果を実現するには、他のWebKitプロパティを組み合わせる必要があります。一般的なバインディングプロパティ：

display：-webkit-box;オブジェクトをエラスティックボックスモデルとして表示するために組み合わせる必要がある属性。

-webkit-box-orientを属性と組み合わせて、伸縮ボックスオブジェクトの子要素の配置を設定または取得する必要があります。