JS實現文字截取（霧）

　　今天在跳板羣那裏看到一個神奇的樣式，效果：

    感受十分神奇，由於一開始覺得他是隻有一個P元素包着文字而後最後一個自動截取文字，並且最後一行還能夠提早截取？？？這怎麼作到的，而後想了一下css怎麼作，好像怎麼都不能夠在最後一行提早截取

　 css多行截取方法是：

overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;

　　然而這個方法只能實現多行截取，不能讓最後一行提早截取；若是隻是靠css來截取的話 貌似是不能夠的，理由如圖：

　　

　　溢出的部分直接把空間撐開，不會提早截取。

　　因此只能用js來截取了。JS要怎麼截取？一開始我是不知道的，直到看到了其餘前輩的博客：

      http://www.cnblogs.com/milkmap/archive/2013/05/27/3101325.html；

　　根據這個博客本身寫了截取的js

var element = $("div");
    var element2 = $("div p");
    var h  = element.height()-20;
    var v = '';
    var val = element2.html();
    console.log(val)
    while(h< element2.height()){
            v = element2.html();
            v = v.substring(0,v.length - 1);
            element2.html(v);
        }
    var val2 = val.replace(v,"");
    element.append("<p style='width: 120px;overflow: hidden;text-overflow: ellipsis;word-break: keep-all;display: inline-block;'>"+val2+"</p>");
    element.append("<span>詳細</span>")

　　核心部分就是循環那段了，經過判斷容器大小，來截取字符串，看完博客後才知道能夠這樣截，果真要好好看javascript的原生API了。

　　最後附上css，html

    html,body{
        line-height:20px;
    }
    p{
        padding:0px;
        margin:0px;
    }
    .row{
        width: 200px;
        border: 1px solid #000;
        line-height: 20px;
        max-height: 60px;
        clear: both;
        overflow: hidden;
    }
    span{
        display: inline-block;
        float: right;
        color: white;
        background: black;
    }

    <div class="row">
        <p>在1815年，正值拿破崙被流放厄爾巴島時，一個既年輕又成功的商船水手愛德蒙·唐泰斯，在船長利克萊爾瀕死的時刻接受了船長指揮權，並回到了家鄉馬賽迎娶他的未婚妻美蒂絲。利克萊爾，一個拿破崙的支持者，吩咐唐泰斯運送兩樣物品，一個是給予位於厄爾巴島上的馬歇爾·伯特蘭德的包裹，一個是從厄爾巴島上寄出給予一位居住於巴黎的神祕男子的信件。這封神祕信件使唐泰斯兩位妒忌他的朋友，在另外一位朋友的建議下指控唐泰斯叛國。馬賽的首席檢察官韋爾福，雖然平時爲人正直，開始時也同情唐泰斯，但看到信件的神祕收信人是他父親後，未經調查便判決唐泰斯終身監禁於海上的孤島監獄伊夫堡，而且於同時煙滅了做爲證據的信件。在他被囚在伊夫堡的十四年中，他與亞伯·法利亞成爲了朋友，一名聲稱擁有大量財寶並試圖挖地道逃獄的老囚犯。法利亞將一輩子所學教授於唐泰斯，並在死前將藏於基督山的財寶告知於唐泰斯。1829年，法利亞死去後，唐泰斯便裝扮法利亞的屍體逃離了伊夫堡，並被一艘走私船給救起，在跟走私犯一塊兒工做數個月後，他來到了基督山，他佯裝成受傷的模樣，並說服走私犯暫時將他置於基督山，趁著這段時間前往財寶的藏置處。在找到了財寶以後，唐泰斯回到了故鄉馬賽，得知了本身的父親貧窮潦倒而死；他建造了一艘船，將剩餘的財寶藏在船上，接着向塔斯卡尼政府收購基督山及伯爵的頭銜。回到了馬賽，唐泰斯便開始計劃他的復仇，但在那以前，他幫助了一些在他入獄前幫助過他的人。在1815年，正值拿破崙被流放厄爾巴島時，一個既年輕又成功的商船水手愛德蒙·唐泰斯，在船長利克萊爾瀕死的時刻接受了船長指揮權，並回到了家鄉馬賽迎娶他的未婚妻美蒂絲。利克萊爾，一個拿破崙的支持者，吩咐唐泰斯運送兩樣物品，一個是給予位於厄爾巴島上的馬歇爾·伯特蘭德的包裹，一個是從厄爾巴島上寄出給予一位居住於巴黎的神祕男子的信件。這封神祕信件使唐泰斯兩位妒忌他的朋友，在另外一位朋友的建議下指控唐泰斯叛國。馬賽的首席檢察官韋爾福，雖然平時爲人正直，開始時也同情唐泰斯，但看到信件的神祕收信人是他父親後，未經調查便判決唐泰斯終身監禁於海上的孤島監獄伊夫堡，而且於同時煙滅了做爲證據的信件。在他被囚在伊夫堡的十四年中，他與亞伯·法利亞成爲了朋友，一名聲稱擁有大量財寶並試圖挖地道逃獄的老囚犯。法利亞將一輩子所學教授於唐泰斯，並在死前將藏於基督山的財寶告知於唐泰斯。1829年，法利亞死去後，唐泰斯便裝扮法利亞的屍體逃離了伊夫堡，並被一艘走私船給救起，在跟走私犯一塊兒工做數個月後，他來到了基督山，他佯裝成受傷的模樣，並說服走私犯暫時將他置於基督山，趁著這段時間前往財寶的藏置處。在找到了財寶以後，唐泰斯回到了故鄉馬賽，得知了本身的父親貧窮潦倒而死；他建造了一艘船，將剩餘的財寶藏在船上，接着向塔斯卡尼政府收購基督山及伯爵的頭銜。回到了馬賽，唐泰斯便開始計劃他的復仇，但在那以前，他幫助了一些在他入獄前幫助過他的人。</p>
    </div>

　　這個方法，感受其實也不太好，由於若是要到實際應用的話一個商城這麼多個標題或者備註，若是都要這樣處理的話。。。感受while循環次數是否是有點多了。。。。