同學(xué)們?cè)谇岸碎_(kāi)發(fā)過(guò)程中可能會(huì)遇到需要將多行文本溢出部分隱藏并替換為省略號(hào)的情況，這里小千就來(lái)給大家介紹一下解決方案。

      單行文本溢出及省略

      眾所周知，在CSS3中單行文本省略一般使用text-overflow實(shí)現(xiàn)：text-overflow:ellipsis;

      此屬性?xún)H當(dāng)文本溢出時(shí)是顯示省略標(biāo)記，并不具備其它的樣式屬性定義，要實(shí)現(xiàn)溢出時(shí)產(chǎn)生省略號(hào)的效果還需定義以下屬性：

      容器寬度: width：value;

      強(qiáng)制文本在一行內(nèi)顯示: white-space：nowrap;

      溢出內(nèi)容為隱藏： overflow：hidden;

      溢出文本顯示省略號(hào)： text-overflow：ellipsis;

      可惜這個(gè)屬性只支持單行文本溢出顯示省略號(hào)，并不支持多行文本。

      多行文本溢出省略的幾種方法

      WebKit的一個(gè)CSS擴(kuò)展屬性可以限制在一個(gè)塊元素中顯示的文本的行數(shù)，它是一個(gè)不規(guī)范的屬性（unsupported WebKit property），沒(méi)有出現(xiàn)在CSS規(guī)范草案中。

      -webkit-line-clamp:value;

      該屬性實(shí)現(xiàn)溢出省略效果還需要結(jié)合其他的屬性：display: -webkit-box;

      必須結(jié)合的屬性，將對(duì)象作為彈性伸縮盒子模型顯示：-webkit-box-orient:vertical;

      必須結(jié)合的屬性，設(shè)置或檢索伸縮盒對(duì)象的子元素的排列方式，此時(shí)便可以結(jié)合：text-overflow:ellipsis;實(shí)現(xiàn)多行文本省略。

      兼容寫(xiě)法

      把包含省略號(hào)的元素的定位在最后一行上，也能實(shí)現(xiàn)一個(gè)多行文本省略，沒(méi)有花里胡哨的東西，只要調(diào)得準(zhǔn)，基本可以兼容大部分瀏覽器，說(shuō)的就是IE。（doge）

      以上就是多行文本溢出問(wèn)題的解決方案介紹了，同學(xué)們留意一下最后的兼容寫(xiě)法，兼容問(wèn)題是最容易被忽略的，最后如果你對(duì)web前端開(kāi)發(fā)感興趣的話不妨來(lái)千鋒HTML5大前端培訓(xùn)班了解一下我們的前端培訓(xùn)課程，現(xiàn)在報(bào)名還能享受海量?jī)?yōu)惠，更有免費(fèi)的前端學(xué)習(xí)資料可以領(lǐng)取，快來(lái)了解一下吧！

聲明：本站稿件版權(quán)均屬千鋒教育所有，未經(jīng)許可不得擅自轉(zhuǎn)載。