CSS設置文本超出隱藏

單行實現文本溢出顯示省略號：

    span{
        white-space: nowrap;      /*超出的空白區域不換行*/
        overflow: hidden;         /*超出隱藏*/
        text-overflow: ellipsis;  /*文本超出顯示省略號*/
    }

雙行實現文本溢出顯示省略號：

    span{
        display: -webkit-box;             /*將對象轉為彈性盒模型展示*/
        -webkit-box-orient: vertical;     /*設置彈性盒模型子元素的排列方式*/
        -webkit-line-clamp: 2;            /*限制文本行數*/
        overflow: hidden;                 /*超出隱藏*/
    }

多行實現文本溢出顯示省略號：

    span{
        position: relative;
        line-height: 1.4em;        /*行高和height成倍數，這里以三行文本超出隱藏舉例*/
        height: 4.2em;
        overflow: hidden;
    }
    span::after{         /*若要兼容IE8需用:after*/
        content: "...";          /*替換內容比較靈活*/
        position: absolute;
        bottom: 2px;
        right:5px;
        padding: 0 3px;
        background:#fff;         /*顏色和文字背景保持一致*/
        box-shadow: 0 0 10px #fff;  /*邊緣處理*/
    }