摘要：實(shí)現(xiàn)這個(gè)放在第一個(gè)說(shuō)，因?yàn)檫@個(gè)可能是最簡(jiǎn)單的方法了，代碼直接用控制行數(shù)，就可以達(dá)到目的，當(dāng)文字超過(guò)三行的時(shí)候就會(huì)截?cái)嗉由鲜÷蕴?hào)。

單行文字的截?cái)喾浅：?jiǎn)單，但是多行文字的截?cái)嗫芍^是非常頭疼，剛學(xué)css時(shí)候就為了這個(gè)寫(xiě)了很多亂七八糟的代碼，今天工作又遇到了這個(gè)需求...比較巧的是某公眾號(hào)今天正好也推送了一篇如何設(shè)置截?cái)嗟奈恼?，心血?lái)潮就自己將見(jiàn)到的各種方法總結(jié)下，也算加深記憶與理解。

先預(yù)設(shè)一個(gè)html結(jié)構(gòu)，分別用不同的方法對(duì)其進(jìn)行嘗試，html結(jié)構(gòu)：

  
中國(guó)足球就像是一列疾馳而過(guò)的地鐵，當(dāng)再一次與世界杯擦肩而過(guò)的時(shí)候，我們才會(huì)更清楚地意識(shí)到，這列地鐵的前方也許依舊是冬天，但是里皮的到來(lái)或許可以讓那個(gè)冬天不再像以往那樣的寒冷和漫長(zhǎng)，因?yàn)橹辽偎谟盟念Ｖ呛蛯?duì)足球的熱情點(diǎn)亮了我們前方的路，只愿這終將是一列開(kāi)往春天的地下鐵。

初始css代碼，主要設(shè)置了容器的寬度，行高和overflow:hidden:

.wrap {
  width: 300px;
  height: 3.6em;
  border: 1px solid #eee;
  overflow: hidden;
  font: 700 16px/1.2 "微軟雅黑";
}

下面的方法都是在樣式名wrap的基礎(chǔ)上添加各自的多重選擇器。

這個(gè)放在第一個(gè)說(shuō)，因?yàn)檫@個(gè)可能是最簡(jiǎn)單的方法了，代碼：

.line-camp {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical; 
}

直接用-webkit-line-clamp控制行數(shù)，就可以達(dá)到目的，當(dāng)文字超過(guò)三行的時(shí)候就會(huì)截?cái)嗉由鲜÷蕴?hào)。但是看到這個(gè)-webkit-就會(huì)知道這個(gè)只針對(duì)webkit內(nèi)核瀏覽器，火狐都是不支持的，這可是很嚴(yán)重的問(wèn)題，目前也沒(méi)有很好的hack方法。并且注意這里文字我用了div包裹，加入用p等有默認(rèn)內(nèi)邊距或外邊距的元素包裹，這個(gè)樣式就會(huì)出很大的問(wèn)題無(wú)法使用。因此這個(gè)屬性看起來(lái)美但是使用起來(lái)局限性太大了...不得不吐槽為啥不把這個(gè)屬性規(guī)范統(tǒng)一了，也就沒(méi)下面那么多事了。

這個(gè)方法我看到真得是被驚艷到了，網(wǎng)上有很多文章介紹了這個(gè)，搜了下找到了原文。這里就復(fù)述下。
從這個(gè)方法的思想源頭來(lái)分析，假設(shè)一個(gè)固定大小(寬300px)的容器內(nèi)部有三個(gè)塊，一個(gè)左浮動(dòng)(寬100px)高度撐滿，右邊兩個(gè)右浮動(dòng)根據(jù)文字多少自適應(yīng)撐開(kāi)。

當(dāng)藍(lán)色塊中的文字逐漸增多時(shí)候，橙色塊的位置也會(huì)發(fā)生變化，圖中容器高度正好是三倍的行高，因此當(dāng)藍(lán)色塊文字少于或等于三行的時(shí)候，橙色塊一直在藍(lán)色塊的右下方移動(dòng)：

當(dāng)藍(lán)色塊文字大于三行的時(shí)候，橙色塊會(huì)移動(dòng)到藍(lán)色塊右側(cè)，粉色塊下面：

由于浮動(dòng)的特性，橙色塊的移動(dòng)給了我們靈感，新增一個(gè)黃色塊相對(duì)于橙色塊定位：

.realend {
    position: absolute;
    width: 100%;
    top: -20px;
    left: 200px;
    background-color: yellow;
 }

那么隨著藍(lán)色塊文字增多黃色塊移動(dòng)的效果如下：

很驚喜的發(fā)現(xiàn)這樣做的話，當(dāng)藍(lán)色塊文字溢出時(shí)候，黃色塊正好在右下角可以作為省略號(hào)的位置，而未溢出時(shí)候黃色塊是溢出容器的，正好符合要求。

但是這樣多一個(gè)標(biāo)簽絕對(duì)定位明顯是很啰嗦的，我們采用相對(duì)定位就可以了，只保留黃色塊:

.realend {
  float: right;
  width: 80px;
  background-color: yellow;
  position: relative;
  left: 200px;
  top: -20px;
}

效果一樣的：

整個(gè)思路已經(jīng)有了，下面就輪到處理現(xiàn)在存在的問(wèn)題了，紅色塊的寬度把藍(lán)色塊推到右邊100px的距離，顯然是不合理的，我們利用負(fù)margin處理藍(lán)色塊，將藍(lán)色塊設(shè)置為100%寬度，然后margin-left設(shè)置為-100px,這樣藍(lán)色塊就能充滿整個(gè)容器覆蓋了粉色塊，這時(shí)候黃色塊也設(shè)置自身寬度的負(fù)margin-left設(shè)置為-80px，然后用盒模型的原理再設(shè)置padding-right為粉色塊的寬度100px(設(shè)置margin-right也可以，都是利用盒模型讓黃色塊實(shí)際盒模型寬度為紫色塊的寬度),這里的負(fù)邊距的用法很巧妙，可以多理解下，然后再left百分百定位就可以了。

.main {
  float: right;
  width: 100%;
  margin-left: -100px;
  background-color: #00ffff;
}
.realend {
  float: right;
  width: 80px;
  background-color: yellow;
  position: relative;
  left: 100%;
  top: -20px;
  margin-left: -80px;
  padding-right: 100px;
}

效果如下：

給容易加上overflow:hidden就達(dá)到效果了。

最后我們就根據(jù)上面的原理實(shí)現(xiàn)第二種文字截?cái)啵?/p>

.ellipsis:before {
    content:"";
    float: left;
    width: 5px; height: 3.6em; }

.ellipsis > *:first-child {
    float: right;
    width: 100%;
    margin-left: -5px; }        

.ellipsis:after {
    content: "