[网摘]慢谈alt、title和longdesc属性

我打算慢条斯理的来写这三个属性的特点及区别，写之前去了小破孩的主站，下了这个桌面替代了我之前兔斯基的桌面。

此前在阿捷的网站看了这三者属性的详解，不想用转贴，中间想串插一些自己的想法和测试结果，每周一次的交流还是很有效的，至于让我很认真的学习，测试，对专业有更深入的理解，言归正转了。

众所周知，alt这个属性是用在当网页中的图片无法正常下载浏览时，充当一个说明，当然如果对于纯文本浏览器就更有用了。alt不仅用于img标签显示的图片，还可以用在热区和以图片作为显示的按钮上面，比如<input type="image" ...>，它的长度可到达100个英文字符，如果需要更长的话，就要用longdesc这个属性了。稍后讲这个~

title则是对文本的说明补充，title属性可以用在除了base，basefont，head，html，meta，param，script和title之外的所有标签中，title属性有一个很好的用途，即为链接添加描述性文字，特别是当连接本身并不是十分清楚的表达了链接的目的。title属性值可以比alt属性值设置的更长。不过要注意的是，有些浏览器会截断过长的文字，这个我在firefox中尝试过了，过长的文字说明会被自动截断，并且最后以“...”来结束，至于firefox能支持最长是多长的，我还没有认真去数过。但在IE中不会有被截断的问题存在。

用这两个属性写说明文字时，对文字换行都可以采用直接回车（注意不是<br />）或是加入&#13;来实现，在IE中很有效，但在firefox上测试则无效。而且alt属性好像在firefox中也无效，我测试过，我的版本是firefox 2.0.0.11

最后说说longdesc属性吧，据我了解，当一个图片需要更加长的描述，而超过alt属性的限制，可以用它来替代，而且，longdesc属性可以用来提供链接到一个包含图片文字描述的单独页面。不过，这就意味着把浏览者链接到另外的页面，这可能会造成理解上的困难。另外浏览器对于longdesc属性的支持也是不一致的，并且不是非常好。我在IE和firefox中都测试过这个属性，MS没有成功的。

最后再介绍一个好用的css，它的功能是能自动截断列表中过长的文字，只以当前列表的宽度显示，长出的部分可以以“...”（这个可以自定义）结束，并结合title属性，把全部的文字放到title中以说明的形式展现，当鼠标移到文字上面的时候才会看到全部的文字。贴css代码及说明如下：

.test{
width:200px;
height:50px;
border:1px solid red;
padding:10px;
overflow:hidden; /*不显示超过对象宽度的内容*/
text-overflow:ellipsis; /*当对象内文本溢出时显示省略标记（...）*/
white-space:nowrap; /*限制在一行内显示所有文本*/
}

不过值得注意的是，当你定义过长的部分以“...”显示的时候，仅有IE中才有效，在firefox中是直接砍掉后面的文字，没有任何东西帮助结尾，而且在宽度上面，IE会根据你定义的宽度正常显示，在firefox中会有一点点差别：)

转自：http://hi.baidu.com/dabaozi_pp/blog/item/ceac4011cb0711c2a6ef3f3a.html