公司的网站中有时候由于某些文件的文件名太长,在固定了宽度的表格或层中,这些文字不能在一行中完整显示出来,通常都是自动回行到下一行显示,这样的情况对网站本身并没有错,可是却非常有碍于网站的美观,于是,我采取了超过固定宽度用“…”省略号表示和鼠标经过显示完整内容的方式来处理,使得这些内容在网页上都是严格按照规定的宽度来显示的,网页也美观了不少,同时,由于鼠标经过显示完整内容功能的存在,也不会使得网页不便于阅读。
实现该操作当然是应该要分两步走:
第一步:实现用省略号“…”代替超出规定宽度的文字内容。这又分两个部分来进行操作。
1、定义样式
<style type=”text/css”>
<!–
.cc {
width: 200px;
overflow:hidden;
text-overflow:ellipsis;
cursor: auto;
color: #999999;
text-decoration: none;
}
–>
</style>
2、在合适的位置使用该样式
<table><tr><td>
<span class=cc><nobr>文字内容</nobr></span>
</td></tr></table>
需要注意的是:
必须要在文字内容前后加上Nobr标签对才能使效果实现。很多人样式设置和使用对了,就是因为没有加上这个标签才不能出现想要的效果。
第二步,为链接加上鼠标提示:
用超链接的title属性即可,即为title属性加上该链接的完整的动态内容属性值