CSS文本溢出顯示省略號

項目中常常有這種需要我們對溢出文本進行"..."顯示的操作，單行多行的情況都有（具體幾行得看設計師心情了），這篇隨筆是我個人對這種情況解決辦法的歸納，歡迎各路英雄指教。

單行

語法

	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap

示例

文本溢出顯示省略號,文本溢出顯示省略號,文本溢出顯示省略號

多行

1.直接用css屬性設置(只有-webkit內核才有作用)

語法

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

移動端瀏覽器絕大部分是WebKit內核的，所以該方法適用於移動端；

• -webkit-line-clamp 用來限制在一個塊元素顯示的文本的行數,這是一個不規范的屬性（unsupported WebKit property），它沒有出現在 CSS 規范草案中。

• display: -webkit-box 將對象作為彈性伸縮盒子模型顯示 。

• -webkit-box-orient 設置或檢索伸縮盒對象的子元素的排列方式 。

• text-overflow: ellipsis 以用來多行文本的情況下，用省略號“…”隱藏超出范圍的文本。

示例

文本溢出顯示省略號,文本溢出顯示省略號,文本溢出顯示省略號,文本溢出顯示省略號,文本溢出顯示省略號,文本溢出顯示省略

2.利用偽類

語法

<div id="con">
  <span id="txt">文本溢出顯示省略號,文本溢出顯示省略號,文本溢出顯示省略號,文本溢出顯示省略</span>
  <span class="t"></span>
</div>
<style>
#txt{
  display: inline-block;
  height: 40px;
  width: 250px;
  line-height: 20px;
  overflow: hidden;
  font-size: 16px;
}
.t:after{
  display: inline;
  content: "...";
  font-size: 16px;
	
}
</style>

示例

文本溢出顯示省略號,文本溢出顯示省略號,文本溢出顯示省略號,文本溢出顯示省略

3.利用絕對定位和padding;(跨瀏覽器解決方案)
看到上例是不是覺得“哇，終於可以跨瀏覽器使用了”，但你這樣想的時候有沒有考慮過IE的感受？IE6/7是沒有偽類的，還不趕快跪下對IE叫聲“大哥”，雖然IE6已經退出市場，但是IE7還是需要兼容的，所以呢，我自己又想到了以下的辦法，我這邊測試了下感覺還行。

上代碼

<p id="con2">文本溢出顯示省略號,文本溢出顯示省略號,文本溢出顯示省略號,文本溢出顯示省略<span class="t2">...</span>
</p>
<style>
#con2{
  position: relative;
  height: 40px;
  width: 250px;
  line-height: 20px;
  overflow: hidden;
  padding-right: 12px;
}  
.t2{
  position: absolute;
  right: 0;
  bottom: 0;
}
</style>

這個方法的原理是：首先在包含文字的元素里，嵌入一個<span>...</span>，然后包含文字的元素右側留出...的位置(padding-right),最后利用絕對定位將...定位至右側的padding-right區域
示例

文本溢出顯示省略號,文本溢出顯示省略號,文本溢出顯示省略號,文本溢出顯示省略...

4.其他
利用js插件來實現該功能，這里有倆款插件推薦，這篇主要介紹的是css方法，所以它們使用方法就不廢話了。

• Clamp.js
• jQuery.dotdotdot

問題
感謝村長指出了第二種和第三種都沒有考慮到內容不足倆行的情況，這種情況下，我的上面說到的第二種和第三種方法，“...”依舊會存在，並不會隱藏。暫時還沒有想出利用css來實現不到倆行隱藏的辦法，sorry。所以如果存在不到倆行的情況盡量還是不要用了吧，可以使用js。這個就先放在這兒，什么時候想到辦法再來修改

     function mitulineHide(num,con){
		var contain = document.getElementById(con);
		 console.log(con);
		var maxSize = num;
		var txt = contain.innerHTML;
		if(txt.length>num){
			console.log('1')
			txt = txt.substring(0,num-1)+"..."
		    contain.innerHTML = txt;
		}else{
			console.log("error")
		}
	};

該函數傳入倆個參數：允許的最大文字數目、包含文字的元素節點Id

如果覺得本文不錯的話，幫忙點擊下面的推薦哦
>>>>點擊閱讀原文