單行及多行文本溢出以省略符號顯示的方法總結，多行文本省略符號

單行及多行文本溢出以省略符號顯示的方法總結，多行文本省略符號

需求：

在前端頁面配置中，經常會有因文字過多而影響頁面排版。特別是在移動端頁面中，因螢幕寬度不夠段落文字如完全顯示則會打亂布局。因此若段落文字能根據螢幕空餘大小而顯示就完美了，也就是若螢幕夠大，段落文字就完全顯示，若螢幕很小，則段落文字以省略符號的形式部分顯示。

解決辦法：

在CSS3中有text-overflow屬性，不熟悉的同學可以點此查詢。用來實現單行文本的溢出顯示省略符號，單行文本的溢出顯示省略符號在現代瀏覽器及移動端都能實現相容。

效果

實現方法：

        <p>作為微軟的遊戲平台，Xbox已經出現在了Windows Phone和Windows 8中，就在最近，微軟宣布將旗下的Zune消費品牌也一併整合至Xbox品牌下，Xbox Live服務影響力越來越大，滲透面也越來越廣。</p>

    p {        width: 410px;        overflow: hidden;        text-overflow: ellipsis;        white-space: nowrap;    }

問題來了：如果我們要實現多行文本溢出顯示省略符號呢？

解決辦法：Webkit支援一個名為-webkit-line-clamp的屬性，不熟悉的同學可以點此查詢。這個屬性是一個 不規範的屬性（unsupported WebKit property），它沒有出現在 CSS 規範草案中。但在webkit核心的瀏覽器中可以使用。

效果

實現方法：

    <div class="figcaption">        <p>作為微軟的遊戲平台，Xbox已經出現在了Windows Phone和Windows 8中，就在最近，微軟宣布將旗下的Zune消費品牌也一併整合至Xbox品牌下，Xbox Live服務影響力越來越大，滲透面也越來越廣。</p>    </div>    <div class="figcaption">        <p>固定一個喜歡的網站可不可以？當然！把每天常去的網站統統固定到開始畫面中。如何固定？開啟 IE10，在網頁空白處點擊滑鼠右鍵，在應用程式列中點擊“圖釘”表徵圖即可完成固定。</p>    </div>    <div class="figcaption">        <p>先前給大家介紹了很好用的 Colors！今天給大家介紹一款風格不同的畫畫軟體——Fresh Paint，我們可以用它畫出油畫。</p>    </div>

    .figcaption {        background: #EEE;        width: 410px;        height: 3em;        margin: 1em;    }        .figcaption p {        line-height: 1.5em;        overflow: hidden;        text-overflow: ellipsis;        display: -webkit-box;        -webkit-line-clamp: 2;        -webkit-box-orient: vertical;        /*因使用了WebKit的CSS擴充屬性，該方法適用於WebKit瀏覽器及移動端；*/    }

問題又來了：如何在其他主流瀏覽器中實現完美相容呢？看來還得靠JS實現

解決辦法：

（實現原理：通過從後向前逐個替換末尾字元，直至元素的高度小於父元素高度）

<script src="http://apps.bdimg.com/libs/jquery/1.11.3/jquery.min.js"></script><script type="text/javascript"> $(".figcaption").each(function(i) {        var divH = $(this).height();        var $p = $("p", $(this)).eq(0);        while ($p.outerHeight() > divH) {            $p.text($p.text().replace(/(\s)*([a-zA-Z0-9]+|\W)(\.\.\.)?$/, "..."));        };    });</script>