單行和多行文字溢位使用省略號代替

阿飛神奇發表於2020-09-27

1.單行文字溢位,對文字的父級盒子新增屬性:

    //white-space: normal;
    white-space: nowrap;//(使文字在一行顯示)
    overflow: hidden;//隱藏溢位的文字
    text-overflow: ellipsis;//用省略號代替溢位的文字

2.多行文字溢位,有較大相容性,適合於webKit瀏覽器或移動端:

    overflow: hidden;
    text-overflow:ellipsis;
    /*彈性伸縮盒子模型顯示*/
    display: -webkit-box;
    /*限制在一個塊元素顯示文字的行數*/
    -webkit-line-clamp:2;
    /*設定或檢索伸縮盒物件的子元素的排列方式*/
    -webkit-box-orient: vertical;

相關文章