1.通過text-overflow實現

	#text_overflow_1 {
		200px;
		height: 50px;
		border: 1px solid;
		overflow:hidden; /*超出寬度部分的隱藏*/
		white-space:nowrap; /*文字不換行*/
		text-overflow:ellipsis; /*超出則...代替*/
		-o-text-overflow:ellipsis;  /*opera*/
	}

	<div id="text_overflow_1">
		這是一段測試文字，文章超出寬度時是否會隱藏多余的文字
	</div>

首先，我們將它的寬度限制在200px，white-space屬性首先讓文字不換行，然后overflow屬性使其超出div寬度的內容隱藏不顯示。text-overflow:ellipsis這個屬性則可以實現我們所要的效果，在文字的后面加上... , 這種方式兼容主流瀏覽器，低版本的火狐可能不支持，需要用其他的方式去處理，這里就不說了。

2.通過jQuery限制字符字數的方法實現

function wordLimit(num){
	var maxwidth=num;
	if($(this).text().length>maxwidth){
		$(this).text($(this).text().substring(0,maxwidth));
		$(this).html($(this).html()+'...');
	}
}

這種方式是通過傳最大長度限制顯示的長度，截取字符串之后再最后加上省略號。個人感覺這種方式是最簡單的。

3.使用cloneNode復制節點

#text_overflow_3 {
		200px;
		height: 50px;
		border: 1px solid;
}

<div id="text_overflow_3">
		這是一段測試文字，文章超出寬度時是否會隱藏多余的文字
</div>

(function($){
	$.fn.wordLimit = function(num){
		this.each(function(){	
			if(!num){
				var copyThis = $(this.cloneNode(true)).hide().css({
					'position': 'absolute',
					'width': 'auto',
					'overflow': 'visible'
				});	
				$(this).after(copyThis);
				if(copyThis.width()>$(this).width()){
					$(this).text($(this).text().substring(0,$(this).text().length-4));
					$(this).html($(this).html()+'...');
					copyThis.remove();
					$(this).wordLimit();
				}else{
					copyThis.remove(); //清除復制
					return;
				}	
			}else{
				var maxwidth=num;
				if($(this).text().length>maxwidth){
					$(this).text($(this).text().substring(0,maxwidth));
					$(this).html($(this).html()+'...');
				}
			}					 
		});
	}
})(jQuery);

將第二種實現方式和第三種實現方式結合在一起寫個jquery插件，其實就是使用cloneNode去復制一個節點，然后將復制的節點的寬度與當前節點在css中定義的寬度進行比較，循環遍歷，每次長度-4，因為還有3個省略號。當長度相等的時候則停止遍歷。這個方法是在別人的blog上看到的。
其實還有很多的方法可以去實現，暫時就寫這么多吧！

總結

以上是生活随笔為你收集整理的js、css实现文字内容省略的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。