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

zhibo系統開發 發表於 2022-11-22
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實現超出部分顯示省略號,控制文字,更多內容歡迎關注之後的文章


來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/69978258/viewspace-2924518/,如需轉載,請註明出處,否則將追究法律責任。