web前端技巧|多行文本溢出問題解決方案

      同學們在前端開發(fā)過程中可能會遇到需要將多行文本溢出部分隱藏并替換為省略號的情況，這里小千就來給大家介紹一下解決方案。

      單行文本溢出及省略

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

      此屬性僅當文本溢出時是顯示省略標記，并不具備其它的樣式屬性定義，要實現(xiàn)溢出時產(chǎn)生省略號的效果還需定義以下屬性：

      容器寬度: width：value;

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

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

      溢出文本顯示省略號： text-overflow：ellipsis;

      可惜這個屬性只支持單行文本溢出顯示省略號，并不支持多行文本。

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

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

      -webkit-line-clamp:value;

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

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

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

      兼容寫法

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

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

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