文字超过宽度显示省略号（js版）

最近一直纠结于文字超过后显示省略号的问题，text-ellipsis只有ie支持（日，干嘛这么多浏览器），最后想到一个js解决办法，ie、chrome、ff测试通过，而且可以根据需要来判断是不是要显示提示文字，个人认为还不错，呵呵，不罗嗦了，上代码

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
		
		<style type="text/css">
			* {
				font-size: 9pt;
			}
			
			.container {
				overflow: hidden;
				background: #f1f1f1;
				white-space: nowrap;
			}
			
			.container .label {
				overflow: hidden;
				white-space: nowrap;
			}
		</style>
		
		<script type="text/javascript">
			function getText(el) {
				return el.innerText || el.textContent;
			}
			
			function setText(el, text) {
				if (el.innerText) {
					el.innerText = text;
				} else if (el.textContent) {
					el.textContent = text;
				}
			}
		
			function updateEllipsis(container, label) {
				if (container.scrollWidth > container.offsetWidth) {
					var text = getText(label);
					//此处重要，利用container的实际宽度和显示宽度的比例计算出文字显示的个数，然后，截取出来并在末位加上...
					var len = container.offsetWidth / container.scrollWidth * text.length;
					setText(label, text.substring(0, Math.floor(len) - 1) + "...");
					label.title = text;
				} else {
					if (label.title != "") {
						setText(label, label.title);
						label.title = "";
					}
				}
			}
			
			function init() {
				var div1 = document.getElementById("div1");
				var lab1 = document.getElementById("lab1");
				updateEllipsis(div1, lab1);
				
				
				var div2 = document.getElementById("div2");
				var lab2 = document.getElementById("lab2");
				updateEllipsis(div2, lab2);
				
				var div3 = document.getElementById("div3");
				var lab3 = document.getElementById("lab3");
				updateEllipsis(div3, lab3);
				
			}
		</script>
	</head>
	
	<body onload="init();">
		<div class="container" style="width: 80px" id="div1">
			<label class="label" id="lab1">自动显示省略号</label>
		</div>
	
		<br/>
		<br/>
	
		<div class="container" style="width: 100px" id="div2">
			<label class="label" id="lab2">hello,这是一个测试</label>
		</div>
		
		<br/>
		<br/>
		
		<div class="container" style="width: 100%" id="div3">
			<label class="label" id="lab3">百分百宽度的效果百分百宽度的效果百分百宽度的效果百分百宽度的效果百分百宽度的效果百分百宽度的效果百分百宽度的效果百分百宽度的效果百分百宽度的效果百分百宽度的效果百分百宽度的效果百分百宽度的效果百分百宽度的效果百分百宽度的效果百分百宽度的效果百分百宽度的效果百分百宽度的效果百分百宽度的效果</label>
		</div>
		
	</body>
</html>

上面的代码只是起到抛砖引玉的作用，很多地方还可以完善，比如说支持多行的，等等（转载请注明出处，谢谢）

posted @ 2011-03-16 11:24  bcbr_wang  阅读(6073)  评论(0)    收藏  举报