自动隐藏超出宽度的内容,鼠标移动后提示完成内容!

<script type="text/javascript">
//全局变量,标注是否创建了元素
var isCreate = false;
//显示元素
function showMp(event,obj,text,newline,width){
	var x = event.clientX+3 + "px";
	var y = event.clientY-30 + "px";
	var width = width;
	//如果没有创建过元素可以创建元素
	if(!isCreate){
	//创建新元素
	var newSpan = document.createElement("span");
		//设置个id.用来删除
		newSpan.id = "ow_xl_test_view_mp";
		//设置元素内容
		newSpan.innerHTML = text;
		//设置元素样式.根据当前鼠标位置显示
		newSpan.style.fontSize = '12px';
		newSpan.style.fontStyle = 'normal';
		newSpan.style.fontWeight = 'normal';
		newSpan.style.textDecoration = 'none';
		newSpan.style.color = '#000000';
		newSpan.style.border = '1px solid #000000';
		newSpan.style.background = '#CECECE';
		newSpan.style.position = 'absolute';
		newSpan.style.width = 'auto';
		newSpan.style.top = y;
		newSpan.style.left = x;
		newSpan.style.zIndex = '1000';
		newSpan.style.whiteSpace = 'normal';
		newSpan.style.wordWrap = 'break-word';
		newSpan.style.wordBreak = 'normal'; 
		//如果自动换行,进行处理
		if(newline){
			if(width==null)
				width = 200;
			newSpan.style.width = width;
		}
		
		//添加元素
		obj.parentNode.appendChild(newSpan);
		//全局变量,标注是否创建了元素
		isCreate = true;
	}
}
//删除元素
function hideMp(obj){
	isCreate = false;
	try{
		var node = document.getElementById('ow_xl_test_view_mp');
		node.parentNode.removeChild(node);
	}catch(e){}
}
</script> 
<style>
	.content{
		border: 1px solid red;
		white-space:nowrap;
		overflow:hidden;
		text-overflow:ellipsis;
		width:500px;
	}
</style>
<body>
<table width="800">
	<tr>
		<td>
			<div class="content" onmouseout="hideMp(this)" onmousemove="showMp(event,this,this.innerHTML)">生死不离,你的梦落在哪里。想着生活继续。天空失去美丽,你却等待明天站起。无论你在哪里,我都要找到你。血脉能创造奇迹。你的呼喊就刻在我的血液里</div>
		</td>
	</tr>
	<tr>
		<td>
			<div class="content" onmouseout="hideMp(this)" onmousemove="showMp(event,this,this.innerHTML,true)">生死不离,你的梦落在哪里。想着生活继续。天空失去美丽,你却等待明天站起。无论你在哪里,我都要找到你。血脉能创造奇迹。你的呼喊就刻在我的血液里</div>
		</td>
	</tr>
	<tr>
		<td>
			<div class="content" onmouseout="hideMp(this)" onmousemove="showMp(event,this,this.innerHTML,true,100)">生死不离,你的梦落在哪里。想着生活继续。天空失去美丽,你却等待明天站起。无论你在哪里,我都要找到你。血脉能创造奇迹。你的呼喊就刻在我的血液里</div>
		</td>
	</tr>
	<tr>
		<td>
			<a href="#"><div class="content" onmouseout="hideMp(this)" onmousemove="showMp(event,this,this.innerHTML,true,100)">生死不离,你的梦落在哪里。想着生活继续。天空失去美丽,你却等待明天站起。无论你在哪里,我都要找到你。血脉能创造奇迹。你的呼喊就刻在我的血液里</div></a>
		</td>
	</tr>
</table>
</body>


封装了一个jsp标签..有兴趣的可以看看
http://www.iteye.com/topic/195459

你可能感兴趣的:(html,jsp,生活)