如何對多行文本進行截斷？

前言

單行文字的截斷很是簡單，可是多行文字的截斷可謂是很是頭疼，剛學css時候就爲了這個寫了不少亂七八糟的代碼，今天工做又遇到了這個需求...比較巧的是某公衆號今天正好也推送了一篇如何設置截斷的文章，心血來潮就本身將見到的各類方法總結下，也算加深記憶與理解。

各類奇淫巧技

先預設一個html結構，分別用不一樣的方法對其進行嘗試，html結構：

<div class="wrap">
  <div>中國足球就像是一列疾馳而過的地鐵，當再一次與世界盃擦肩而過的時候，咱們纔會更清楚地意識到，這列地鐵的前方也許依舊是冬天，可是裏皮的到來或許可讓那個冬天再也不像以往那樣的寒冷和漫長，由於至少他在用他的睿智和對足球的熱情點亮了咱們前方的路，只願這終將是一列開往春天的地下鐵。</div>
</div>

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

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

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

-webkit-line-camp實現

這個放在第一個說，由於這個多是最簡單的方法了，代碼：

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

直接用-webkit-line-clamp控制行數，就能夠達到目的，當文字超過三行的時候就會截斷加上省略號。可是看到這個-webkit-就會知道這個只針對webkit內核瀏覽器，火狐都是不支持的，這但是很嚴重的問題，目前也沒有很好的hack方法。而且注意這裏文字我用了div包裹，加入用p等有默認內邊距或外邊距的元素包裹，這個樣式就會出很大的問題沒法使用。所以這個屬性看起來美可是使用起來侷限性太大了...不得不吐槽爲啥不把這個屬性規範統一了，也就沒下面那麼多事了。

浮動特性實現

這個方法我看到真得是被驚豔到了，網上有不少文章介紹了這個，搜了下找到了原文。這裏就複述下。
從這個方法的思想源頭來分析，假設一個固定大小(寬300px)的容器內部有三個塊，一個左浮動(寬100px)高度撐滿，右邊兩個右浮動根據文字多少自適應撐開。

• 當藍色塊中的文字逐漸增多時候，橙色塊的位置也會發生變化，圖中容器高度正好是三倍的行高，所以當藍色塊文字少於或等於三行的時候，橙色塊一直在藍色塊的右下方移動：

  

  當藍色塊文字大於三行的時候，橙色塊會移動到藍色塊右側，粉色塊下面：
  

• 因爲浮動的特性，橙色塊的移動給了咱們靈感，新增一個黃色塊相對於橙色塊定位：

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

  那麼隨着藍色塊文字增多黃色塊移動的效果以下：
  
  
  

  很驚喜的發現這樣作的話，當藍色塊文字溢出時候，黃色塊正好在右下角能夠做爲省略號的位置，而未溢出時候黃色塊是溢出容器的，正好符合要求。

• 可是這樣多一個標籤絕對定位明顯是很囉嗦的，咱們採用相對定位就能夠了，只保留黃色塊:

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

  效果同樣的：
  

• 整個思路已經有了，下面就輪處處理如今存在的問題了，紅色塊的寬度把藍色塊推到右邊100px的距離，顯然是不合理的，咱們利用負margin處理藍色塊，將藍色塊設置爲100%寬度，而後margin-left設置爲-100px,這樣藍色塊就能充滿整個容器覆蓋了粉色塊，這時候黃色塊也設置自身寬度的負margin-left設置爲-80px，而後用盒模型的原理再設置padding-right爲粉色塊的寬度100px(設置margin-right也能夠，都是利用盒模型讓黃色塊實際盒模型寬度爲紫色塊的寬度),這裏的負邊距的用法很巧妙，能夠多理解下，而後再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就達到效果了。

• 最後咱們就根據上面的原理實現第二種文字截斷：

  .ellipsis:before {
      content:"";
      float: left;
      width: 5px; height: 3.6em; }
  
  .ellipsis > *:first-child {
      float: right;
      width: 100%;
      margin-left: -5px; }        
  
  .ellipsis:after {
      content: "\02026";  
  
      box-sizing: content-box;
      -webkit-box-sizing: content-box;
      -moz-box-sizing: content-box;
  
      float: right; position: relative;
      top: -1.2em; left: 100%; 
      width: 3em; margin-left: -3em;
      padding-right: 5px;
      
      text-align: right;
  
    
    background-size: 100% 100%;
    /* 512x1 image, gradient for IE9. Transparent at 0% -> white at 50% -> white at 100%.*/
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAgAAAAABCAMAAACfZeZEAAAABGdBTUEAALGPC/xhBQAAAwBQTFRF////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////AAAA////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////wDWRdwAAAP90Uk5TgsRjMZXhS30YrvDUP3Emow1YibnM9+ggOZxrBtpRRo94gxItwLOoX/vsHdA2yGgL8+TdKUK8VFufmHSGgAQWJNc9tk+rb5KMCA8aM0iwpWV6dwP9+fXuFerm3yMs0jDOysY8wr5FTldeoWKabgEJ8RATG+IeIdsn2NUqLjQ3OgBDumC3SbRMsVKsValZplydZpZpbJOQco2KdYeEe36BDAL8/vgHBfr2CvTyDu8R7esU6RcZ5ecc4+Af3iLcJSjZ1ivT0S/PMs3LNck4x8U7wz7Bv0G9RLtHuEq1TbJQr1OtVqqnWqRdoqBhnmSbZ5mXapRtcJGOc4t2eYiFfH9AS7qYlgAAARlJREFUKM9jqK9fEGS7VNrDI2+F/nyB1Z4Fa5UKN4TbbeLY7FW0Tatkp3jp7mj7vXzl+4yrDsYoVx+JYz7mXXNSp/a0RN25JMcLPP8umzRcTZW77tNyk63tdprzXdmO+2ZdD9MFe56Y9z3LUG96mcX02n/CW71JH6Qmf8px/cw77ZvVzB+BCj8D5vxhn/vXZh6D4uzf1rN+Cc347j79q/zUL25TPrJMfG/5LvuNZP8rixeZz/mf+vU+Vut+5NL5gPOeb/sd1dZbTs03hBuvmV5JuaRyMfk849nEM7qnEk6IHI8/qn049hB35QGHiv0yZXuMdkXtYC3ebrglcqvYxoj1muvC1nDlrzJYGbpcdHHIMo2FwYv+j3QAAOBSfkZYITwUAAAAAElFTkSuQmCC);
    
      background: -webkit-gradient(linear, left top, right top,
          from(rgba(255, 255, 255, 0)), to(white), color-stop(50%, white));
      background: -moz-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);            
      background: -o-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
      background: -ms-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
      background: linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);

js實現

夜深人靜了...下次再來寫吧 TODO...

總結

推薦第二種利用浮動和負邊距等特性的方案，能夠兼容到全部瀏覽器，對理解css也有很大幫助，js方法其實很繁瑣效率也很低不到迫不得己仍是不要使用。

參考

本站某個很好的方案
仍是本站的一個總結