用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=''来清空它,以免影响页面效率。

目录
相关文章
|
3月前
CSS3实现的九宫格图片鼠标悬停去除遮罩层源码
CSS3实现的九宫格图片鼠标悬停去除遮罩层源码
27 0
CSS3实现的九宫格图片鼠标悬停去除遮罩层源码
|
4月前
|
前端开发
CSS中如何实现鼠标悬停效果?
CSS中如何实现鼠标悬停效果?
63 0
|
5月前
|
前端开发
css中的多行省略和单行省略
css中的多行省略和单行省略
|
4月前
|
前端开发 Ubuntu Linux
CSS 修改鼠标图标样式
CSS 修改鼠标图标样式
68 0
|
4月前
|
Web App开发 前端开发 iOS开发
|
5月前
|
前端开发
css中的多行省略和单行省略
css中的多行省略和单行省略
|
6月前
|
前端开发
导航栏也时尚:CSS缩放动画,让导航链接在鼠标经过时绽放!
导航栏也时尚:CSS缩放动画,让导航链接在鼠标经过时绽放!
|
6月前
|
前端开发 UED
HTML和CSS动画:为鼠标经过效果注入灵魂!附源码!
HTML和CSS动画:为鼠标经过效果注入灵魂!附源码!
|
6月前
|
前端开发
导航栏也疯狂:CSS动画让导航栏活起来,跟随鼠标滑动!
导航栏也疯狂:CSS动画让导航栏活起来,跟随鼠标滑动!
|
6月前
|
前端开发
CSS中如何实现鼠标悬停效果?
CSS中如何实现鼠标悬停效果?
91 0

热门文章

最新文章