css 文本溢出截斷省略方案

在項目開發的過程中,我們往往遇到文本溢出需要添加省略號的需求。而這個需求可以分解為兩個，一個是單行溢出省略，一個是多行溢出省略。

單行溢出省略

 

 

<div class="ellipsis">
  這是一行文字,需要溢出添加省略號,因為這行文字特別特別長
</div>

  <style>
    .ellipsis {
      width: 100%;  /* IE6 needs any width */
      white-space: nowrap;  /*強制不換行*/
      -o-text-overflow: ellipsis;    /* Opera 9-10 */
      text-overflow: ellipsis;  /*文本溢出時,顯示省略號 IE, WebKit (Safari, Chrome), Firefox 7, Opera 11*/
      overflow: hidden; /*內容超出,隱藏元素 */
    }
  </style>

 

 

 

效果

 

 

 多行文字溢出省略

<div class="ellipsis">
  這是一段文字因為文字特別長,需要只保留兩行,溢出的部分用省略號表示
</div>

  <style>
    .ellipsis {
      width: 200px;
      display: -webkit-box; /*盒子模型微彈性伸縮模型*/
      word-wrap:break-word; /*鏈接字母強制換行*/
      -webkit-box-orient: vertical; /*伸縮盒子的子元素垂直排列*/
      text-overflow: ellipsis;  /*文本溢出時,顯示省略號 IE, WebKit (Safari, Chrome), Firefox 7, Opera 11*/
      overflow: hidden; /*內容超出,隱藏元素 */
      -webkit-line-clamp: 2;
    }
  </style>

 

效果