css實現(xiàn)文本溢出隱藏

saucxs 發(fā)布于2019-08-30 14:12 / 1464人閱讀

摘要：實現(xiàn)文本溢出顯示省略號在做響應(yīng)式網(wǎng)頁的時候，我們要想在不同尺寸的設(shè)備下保證布局不會錯亂，就需要對文字的長度進(jìn)行限定。

css實現(xiàn)文本溢出顯示省略號

在做響應(yīng)式網(wǎng)頁的時候，我們要想在不同尺寸的設(shè)備下保證布局不會錯亂，就需要對文字的長度進(jìn)行限定。

基礎(chǔ)設(shè)置

在介紹下面的方法之前，我們先對所有的例子進(jìn)行基礎(chǔ)的樣式設(shè)置

/*基礎(chǔ)設(shè)置*/
div.box{
    width: 100px;
    height: 100px;
    border: 1px solid #ffffd;
    color: #333;
    line-height: 1.8;
    margin:30px auto;
}

設(shè)置好啦，現(xiàn)在我們開始表演=.=

1.單行溢出隱藏顯示...



    目錄結(jié)構(gòu)清晰是首要目標(biāo)，至于命名只要能達(dá)到表意的目的即可。目錄結(jié)構(gòu)清晰


/*1.單行溢出隱藏顯示...(在文字的容器上設(shè)置)*/
.text-box1 p{
    white-space: nowrap;      /*超出的空白區(qū)域不換行*/
    overflow: hidden;         /*超出隱藏*/
    text-overflow: ellipsis;  /*文本超出顯示省略號*/
}

我一定要把每一步都記得清清楚楚，因為我發(fā)現(xiàn)不寫清楚為什么這樣設(shè)置，過段時間真的會忘了。
運行效果：

2.多行溢出隱藏顯示...



    目錄結(jié)構(gòu)清晰是首要目標(biāo)，至于命名只要能達(dá)到表意的目的即可。目錄結(jié)構(gòu)清晰


/*2.多行溢出隱藏顯示...(在文字的容器上設(shè)置)  只兼容webkit內(nèi)核的瀏覽器*/
.text-box2 p{
    display: -webkit-box;             /*將對象轉(zhuǎn)為彈性盒模型展示*/
    -webkit-box-orient: vertical;     /*設(shè)置彈性盒模型子元素的排列方式*/
    -webkit-line-clamp: 2;            /*限制文本行數(shù)*/
    overflow: hidden;                 /*超出隱藏*/
}

運行效果：

3.多行溢出隱藏顯示...



    目錄結(jié)構(gòu)清晰是首要目標(biāo)，至于命名只要能達(dá)到表意的目的即可。目錄結(jié)構(gòu)            


/*3.多行溢出隱藏顯示...(跨瀏覽器兼容+偽元素定位)*/
.text-box3 p{
    position: relative;
    line-height: 1.4em;        /*行高和height成倍數(shù)，這里以三行文本超出隱藏舉例*/
    height: 4.2em;
    overflow: hidden;
}
.text-box3 p::after{         /*若要兼容IE8需用:after*/
    content: "...";          /*替換內(nèi)容比較靈活*/
    position: absolute;
    bottom: 2px;
    right:5px;
    padding: 0 3px;
    background:#fff;         /*顏色和文字背景保持一致*/
    box-shadow: 0 0 10px #fff;  /*邊緣處理*/
}

這種方式比較靈活，但是實現(xiàn)的效果可能會比較生硬，所以需要對邊緣進(jìn)行虛化處理。
運行效果：

意思是這個意思，或許會有更合適的方法進(jìn)行處理