源码网 - 中国第一源码门户
选择镜像:网通镜像 - 电信主站
会员登录/控制面版您的位置: 学院首页 >> 网页制作 >> CSS 学习 >> 详细内容
 

推荐文章

 
 

热点文章

  • 绝对经典:DIV+CSS菜单.比flash更逼真
  • 纯DIV/CSS对联漂浮广告代码(无JS)
  • CSS实现选项卡代码
  • 在网页中实现细线表格边框的方法
  • css中的:before:after这两个伪类用法
  • 几个漂亮按钮的css样式
  • 用css来实现标题内容超出长度范围自动省略,且有鼠标提..
  • 利用css设置页面背景固定(背景水印效果)
  • CSS网页布局DIV垂直居中的各种方法
  • DIV+CSS布局入门教程(六) -- 关于ID和CLASS
  • 用层遮盖select下拉菜单
  • DIV+CSS技术入门学习
 
 

相关文章

  • CSS 期望表 (Wishlist)
  • css中的:before:after这两个伪类用法
  • 用CSS完成表单历史保留功能
  • 纯CSS构造Tips效果
  • XHTML网页中怎样加入CSS?
  • web标准化设计:常用的CSS命名规则
  • CSS中expression使用简介
  • 用CSS进行网页样式设计攻略全集
  • 利用css设置页面背景固定(背景水印效果)
  • nginx配置css、js、图片本地缓存过期时间
  • 20个优秀网站助你征服CSS
  • CSS实现选项卡代码
 
 

用css来实现标题内容超出长度范围自动省略,且有鼠标提示

  • 阅览次数:
  • 文章来源: CP整理
  • 原文作者:
  • 整理日期: 2008-09-08
  • 发表评论
  • 字体大小:
  • 小
  • 中
  • 大

很多时候,我们希望一些文字(比如网站首页新闻块的标题),在一行内显示,并且超出它的长度范围时,则加...省略,并且出现提示。

解决办法: 先看示例,,其中表格内左右两块内容完全相同。超出长度的自动省略了,并有提示。注意第二行,在左边,由于容器宽度不够,它是省略有提示的,在右边,由于宽度够,则它是普通模式。你还可以调整IE的“查看 》文字大小”,调成不同的字大小看一看,刷新后再调几下。 这里是相关示例代码,你可以修改后运行:
<style>
#leftnewstd .ellipsis_row{width:170px}
#rightnewstd .ellipsis_row{width:250px}
.ellipsis_row{
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
wzy:expression(        this.title=this.offsetWidth<this.children(0).offsetWidth?this.children(0).innerText:'',
     this.style.wzy=''
);
background-color=#b0b0b0;
}
</style>
<table  ><tr>
<td id=leftnewstd width=200px bgcolor=#f0f0ff >
<span class=ellipsis_row><span>多以开源起家 美国计算机专业前20名著名学校点评</span></span><br>
<span class=ellipsis_row ><span>挑战微软数据库管理案例</span></span><br>
<span class=ellipsis_row ><span>WWW:15年谁主沉浮?</span></span>
</td>
<td id=rightnewstd width=280px bgcolor=#f0fff0>
<span class=ellipsis_row ><span>多以开源起家 美国计算机专业前20名著名学校点评</span></span><br>
<span class=ellipsis_row ><span>挑战微软数据库管理案例</span></span><br>
<span class=ellipsis_row ><span>WWW:15年谁主沉浮?</span></span>
</tr></table>


解释:样式中的overflow,text-overflow,和white-space,三者来结合实现省略功能。css表达式 expression来实现,加提示。用this.offsetWidth<this.children(0).offsetWidth来判断是内容是否超过容器宽度。是的话,加title提示.应用完表达式之后,用this.style.wzy=''来清空它,以免影响页面效率。

上一篇:下载:OpenOffice.org 3.0最终正式版
下一篇:Python 3.0 一个巨大的改变
  • 网友评论:
  • 查看所有评论
  • 我要发表评论
您的网名:
留言主题:
你要发表的内容: