需求：
在前端頁面布局中，經常會有因文字過多而影響頁面排版。特別是在移動端頁面中，因螢幕寬度不夠段落文字如完全顯示則會打亂布局。因此若段落文字能根據螢幕空餘大小而顯示就完美了，也就是若螢幕夠大，段落文字就完全顯示，若螢幕很小，則段落文字以省略號的形式部分顯示。
解決辦法：
在css3中有text-overflow屬性，不熟悉的同學可以點此查詢。用來實現單行文字的溢位顯示省略號，單行文字的溢位顯示省略號在現代瀏覽器及移動端都能實現相容。
效果如圖：
實現方法：
作為微軟的遊戲平台，xbox已經出現在了windows phone和windows 8中，就在最近，微軟宣布將旗下的zune消費品牌也一併整合至xbox品牌下，xbox live服務影響力越來越大，滲透面也越來越廣。
p問題來了：如果我們要實現多行文字溢位顯示省略號呢？
解決辦法：webkit支援乙個名為-webkit-line-clamp的屬性，不熟悉的同學可以點此查詢。這個屬性是乙個 不規範的屬性（unsupported webkit property），它沒有出現在 css 規範草案中。但在webkit核心的瀏覽器中可以使用。
效果如圖：
實現方法：
作為微軟的遊戲平台，xbox已經出現在了windows phone和windows 8中，就在最近，微軟宣布將旗下的zune消費品牌也一併整合至xbox品牌下，xbox live服務影響力越來越大，滲透面也越來越廣。先前給大家介紹了很好用的 colors！今天給大家介紹一款風格不同的畫畫軟體——fresh paint，我們可以用它畫出油畫。
.figcaption問題又來了：如何在其他主流瀏覽器中實現完美相容呢？看來還得靠js實現.figcaption p
解決辦法：
（實現原理：通過從後向前逐個替換末尾字元，直至元素的高度小於父元素高度）
單行和多行文字溢位顯示省略號
單行一般加這個三個屬性即可 overflow hidden text overflow ellipsis white space nowrap 多行需加下面屬性 display webkit box webkit line clamp 2 webkit box orient vertical ove...
實現單行 多行文字溢位顯示省略號
單行溢位,顯示省略號，用text overflow屬性，需要增加寬度 溢位隱藏 overflow hidden 隱藏的部分用.表示 text overflow ellipsis 文字不能轉行 white space nowrap width 244px 用text overflow ellipsis...
單行 多行文字溢位隱藏顯示省略號
classname classname 其中多行文字中，因為我們使用了webkit的擴充套件屬性，該方法適用於核心為webkit的瀏覽器 注意 webkit line clamp是用來限制乙個塊元素顯示的文字行數。為了實現對應的效果，它需要結合其他的webkit屬性。常見的有 1 display w...