用css模拟firefox,chrome,IE等浏览器通用的title标签换行效果

 

a.tooltip {
	text-decoration: none;
}

a.tooltip span {
	display: none;
	border: 1px solid #000;
	text-decoration: none;
	background-color: #FFFFCC;
	position: absolute;
	right: 3px;
	top: 37px;
	filter: alpha(Opacity = 95);
	-moz-opacity: 0.95;
	opacity: 0.95;
	padding: 0.2em 0.6em;
}

a.tooltip:hover span {
	display: block;
}

 

 

<span class="list_fallback_title"><font color="red">*</font><bean:message key="link.title"/>
	<a class="tooltip" href="#">
	  <img  src="/cc/i/info.gif"/><span><bean:message key="link.tooltip"/></span>
	</a>
</span>

 

 

 

链接的title标签是html最常用到的标签之一，文字多了，title标签里的内容会自动换行。 如link  代码如下：<a href=”#” title=”title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title  title title title title title title title title title title title title title title title title title title title title title title title “>link</a> 但有时候我们希望能插入换行符，让title以我们希望的方式来换行。  IE里面很简单，因为我们可以通过加入&#13;或&#10;等字符来实现title换行。 但这一属性在firefox火狐等浏览器中并不好用，我们不得不用下面的css方式来模拟title标签的换行效果。

<style>
a.huanhang{ text-decoration:none; }
a.huanhang div{display:none; border:1px solid #000; text-decoration:none;
color:#000; position:absolute; left:100px;}
a.huanhang:hover div{display:block;}
</style>
<a href="#" class="huanhang">Fname Lname<div>jafdjk(text)<br/>
fdjklfdfd<br/>fdjsklffff</div></a>

转自（

http://www.willpress.com/%E7%94%A8css%E6%A8%A1%E6%8B%9Ffirefoxchromeie%E7%AD%89%E6%B5%8F%E8%A7%88%E5%99%A8%E9%80%9A%E7%94%A8%E7%9A%84title%E6%A0%87%E7%AD%BE%E6%8D%A2%E8%A1%8C%E6%95%88%E6%9E%9C/

）