直播電商平臺開發，css實現超出部分顯示省略號，控制文字

直播電商平臺開發，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 必須結合的屬性 ，設定或檢索伸縮盒物件的子元素的排列方式 。

 以上就是 直播電商平臺開發，css實現超出部分顯示省略號，控制文字，更多內容歡迎關注之後的文章