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

简介: 很多时候,我们希望一些文字(比如网站首页新闻块的标题),在一行内显示,并且超出它的长度范围时,则加...省略,并且出现提示。 解决办法: 先看示例,,其中表格内左右两块内容完全相同。超出长度的自动省略了,并有提示。

很多时候,我们希望一些文字(比如网站首页新闻块的标题),在一行内显示,并且超出它的长度范围时,则加...省略,并且出现提示。
 
解决办法: 先看示例,,其中表格内左右两块内容完全相同。超出长度的自动省略了,并有提示。注意第二行,在左边,由于容器宽度不够,它是省略有提示的,在右边,由于宽度够,则它是普通模式。你还可以调整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=''来清空它,以免影响页面效率。

目录
相关文章
|
7月前
|
前端开发
CSS 限制文字行数(超出显示省略号...)
CSS 限制文字行数(超出显示省略号...)
79 0
|
7月前
|
前端开发
css鼠标放上图片变大
css鼠标放上图片变大
css鼠标放上图片变大
|
13天前
|
前端开发
|
1月前
css3鼠标悬停图片特效源码
css3鼠标悬停图片特效,图片悬停效果源码,可以在网页上面作为自己的动态加载名片,放到侧边栏或者网站合适的位置即可
14 0
css3鼠标悬停图片特效源码
|
1月前
|
前端开发
CSS文本单行溢出显示省略号与多行溢出显示省略号(简单易懂)
CSS文本单行溢出显示省略号与多行溢出显示省略号(简单易懂)
|
1月前
编程笔记 html5&css&js 006 HTML文本:标题
编程笔记 html5&css&js 006 HTML文本:标题
|
4月前
|
前端开发
css实现鼠标多样化
css实现鼠标多样化
25 0
|
4月前
|
前端开发
CSS:实现文本超出显示省略效果(可指定几行显示)
CSS:实现文本超出显示省略效果(可指定几行显示)
|
4月前
|
XML 前端开发 小程序
css实例(一)鼠标hover下拉菜单
红框标注位置,有一个小尖尖角,这个使用样式是这样实现的。 css 复制代码
55 0
|
5月前
|
前端开发
css实现溢出部分文字成为省略号
css实现溢出部分文字成为省略号
18 0