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

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

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

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

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

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

在介紹下面的方法之前，我們先對(duì)所有的例子進(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)在我們開(kāi)始表演=.=

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



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


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

我一定要把每一步都記得清清楚楚，因?yàn)槲野l(fā)現(xiàn)不寫(xiě)清楚為什么這樣設(shè)置，過(guò)段時(shí)間真的會(huì)忘了。
運(yùn)行效果：

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



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


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

運(yùn)行效果：

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;  /*邊緣處理*/
}

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

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