六狼论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

新浪微博账号登陆

只需一步,快速开始

搜索
查看: 135|回复: 0

CSS控制文本超过部分显示省略号(IE)

[复制链接]

升级  5.33%

14

主题

14

主题

14

主题

秀才

Rank: 2

积分
58
 楼主| 发表于 2013-2-7 22:37:52 | 显示全部楼层 |阅读模式
HTML页面代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head>    <title>a.html</title>     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">    <meta http-equiv="description" content="this is my page">    <meta http-equiv="content-type" content="text/html; charset=UTF-8">        <!--<link rel="stylesheet" type="text/css" href="./styles.css">--></head><link type="text/css" rel="stylesheet" href="wb.css" /><body><div id="new1_2" class="title">   <a href="http://www.baidu.com" title="百度主页,不超过显示全部">百度</a></div><div id="new1_2">   <a href="" title="客户端解决标题显示太长省略多余部分并加省略号的样式">客户端解决标题显示太长省略多余部分并加省略号的样式</a><br>   <a href="" title="客户端解决标题显示太长省略多余部分并加省略号的样式">客户端解决标题显示太长省略多余部分并加省略号的样式</a><br>   <a href="" title="客户端解决标题显示太长省略多余部分并加省略号的样式">客户端解决标题显示太长省略多余部分并加省略号的样式</a></div></body></html> 
CSS样式
@charset "utf-8";
/* CSS Document */
#new1_2 {
margin-top: 20px;/* 距页面顶部距离 */
margin-bottom: 20px;/* 距页面底部距离 */
width:200px;/* 宽度 */
   overflow:hidden;/* 多出部分隐藏 */
   white-space:nowrap;/* 不换行 */
}
#new1_2 a,#new1_2 a:hover {
font-size: 13px;/* 字号 */
line-height: 20px;/* 链接之间的高度 */
color: #000000;/* 字体颜色 */
text-decoration: none;/* 去掉下划线 */
padding-left: 10px;/*距左边界位置*/

width:200px;/* 宽度 */
   overflow:hidden;/* 多出部分隐藏 */
   text-overflow:ellipsis;
}
#new1_2 a:hover {
color: #660000;
padding-left: 30px;/*距左边界位置*/

width:200px;/* 宽度 */
   overflow:hidden;/* 多出部分隐藏 */
   text-overflow:ellipsis;
}
 
 
 
 
补充 
 
<DIV STYLE="width: 120px; height: 50px; border: 1px solid blue; overflow: hidden; text-overflow:ellipsis">
<NOBR>就是比如有一行文字,很长,表格内一行显示不下.</NOBR>
</DIV>
您需要登录后才可以回帖 登录 | 立即注册 新浪微博账号登陆

本版积分规则

快速回复 返回顶部 返回列表