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

时间: 2024-08-31 20:43:24

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

css实现li中文本超出行宽自动隐藏

li中的文本超出行宽自动隐藏,在一些新闻类的列表应用中还是比较实用的,具体的实现css样式如下,感兴趣的朋友可以参考下,希望对大家有所帮助     复制代码 代码如下: .aa{white-space:nowrap; text-overflow:ellipsis; overflow: hidden; }

简介内容超出部分文字隐藏省略的特效(可显示)_文字特效

我是那传说中很长很长一段的文字,作者hutia.我是那传说中很长很长一段的文字,作者hutia.我是那传说中很长很长一段的文字,作者hutia.我是那传说中很长很长一段的文字,作者hutia.我是那传说中很长很长一段的文字,作者hutia.我是那传说中很长很长一段的文字,作者hutia.我是那传说中很长很长一段的文字,作者hutia.我是那传说中很长很长一段的文字,作者hutia.我是那传说中很长很长一段的文字,作者hutia.我是那传说中很长很长一段的文字,作者hutia.我是那传说中很长很长

两种利用CSS样式截取标题长度的示例

用CSS样式进行截取标题的长度.   第一.用于SPAN或者LI的标题样式    代码如下 复制代码 .text-css { display:block;/*内联对象需加*/ width:31em; word-break:keep-all;/* 不换行 */ white-space:nowrap;/* 不换行 */ overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */ text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) :需与ov

多浏览器支持CSS 容器内容超出(溢出)支持自动换行_经验交流

CSS容器内容超出(溢出)自动换行,CSS容器内容超出(溢出)自动换行,CSS容器内容超出(溢出)自动换行 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

js 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示实例_javascript技巧

题目中问题一拆为二: 1.文字在超出长度时,如何实现用省略号代替? 2.超长长度的文字在省略显示后,如何在鼠标悬停时,以悬浮框的形式显示出全部信息? 文字在超出长度时,如何实现用省略号代替? 用CSS实现超长字段用省略号表示的方法:所有浏览器兼容! html代码如下: <div style="width:150px;overflow:hidden; white-space:nowrap; text-overflow:ellipsis"> 用CSS实现超长字段被省略的简单方法

LI标签中内容超过长度后以省略号显示的方法

在使用DIV+CSS网页标准制作网页时,LI标签中内容超过长度后以省略号显示的方法. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><meta http-equiv="Content-Type" content="text/html; charset

html中设置让div中的内容超出后自动显示滚动条

 在html页面中,我们有时需要让div中的内容超出后自动显示滚动条,我们可以这样设置: 代码如下: <div class="classlist"> <div class="autoScroll"> <asp:RadioButtonList ID="rblClasses" runat="server" DataTextField="className" DataValueFie

设计iOS中随系统键盘弹收和内容文字长度自适应高度的文本框

设计iOS中随系统键盘弹收和内容文字长度自适应高度的文本框     文本输入框是多数与社交相关的app中不可或缺的一个控件,这些文本输入框应该具备如下的功能: 1.在键盘为弹起时,输入框悬浮在界面底部. 2.当键盘弹起时,输入框位置上移至键盘上方,并且动画应与键盘同步. 3.当输入的文字超出一行时,输入框应想用的进行高度扩展. 4.当输入框的高度达到某一极限值时,输入框高度不应继续扩展,文字区域应该支持滑动.     使用autolayout布局技术加上对键盘的相关监听,可以十分方便的实现上述效

怎么让设置了固定高度的div内容超出时,在ie6中不会自动撑开

问题描述 怎么让设置了固定高度的div内容超出时,在ie6中不会自动撑开 怎么让设置了固定高度的div内容超出时,在ie6中不会自动撑开 解决方案 为什么还要兼容ie6,现在浏览器基本上是ie7以上的了:你设置的高度是以什么为单位的像素还是百分比:如果是百分比的话,其会根据需要自动变化的: 可能你用的div+css还不太熟,所以布局设置不合理吧