單行及多行文本用…省略

單行文本省略

• 單行文本溢出顯示省略號比較簡單，設置white-space: nowrap避免換行，設置overflow: hidden溢出隱藏，再設置text-overflow: ellipse即可。

text-overflow CSS 屬性確定如何向用戶發出未顯示的溢出內容信號。它可以被剪切，顯示一個省略號（'...'，U + 2026 HORIZONTAL ELLIPSIS）或顯示一個自定義字符串。

• 如果是橫向顯示的，比如左側有圖片，右側是文字詳情，則應該給詳情的父元素設置overflow: hidden或者給父元素設置固定寬度，否則會擠占左側圖片的位置。

CSS：

<style>
  .single-line {
    width: 200px;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
</style>

HTML:

<div class="single-line">
  士為知己者死。
</div>
<div class="single-line">
  世上本沒有路，走的人多了，也便成了路。
</div>

多行文本省略

• 用css來實現多行文本隱藏

width:XX; 
text-overflow: ellipsis;
word-break: break-all;
    
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
//要顯示的行數
-webkit-line-clamp: 2;

這種方法的缺點是，只有在谷歌瀏覽器有效果，其他的瀏覽器都沒有效果，所以……還是用js來實現吧

• 用js來實現多行文本隱藏
  HTML:

<div class="main_cont">
  <span class="word_cont">隨着人們生活水平的提高，越來越多的人選擇出去旅游來度過自己的假期。海南省三亞市是一座美麗的濱海城市，自然風光優美，氣候宜人，是一個旅游度假的好地方，所以每年都會…</span>
  <a href="" class="f14 c_3eb382 read_all">[閱讀全文]</a>
</div>
<style>
.word_cont {
  width:485px；
  margin: 10px 0 15px;
  font-size: 14px;
  line-height: 1.6em;
}
</style>

jquery:

$('.word_cont').each(function(){
  //設置顯示獲取字符串的字數  這個根絕要求 看需要大概顯示幾行
  var maxwidth=80;   
  if($(this).text().length>maxwidth){
    //截取字符串
    $(this).text($(this).text().substring(0,maxwidth));
    //多余的用省略號顯示
    $(this).html($(this).html()+'…');
  }
});