注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

_

_

 
 
 

日志

 
 

文字内容或标题过长,用 ... 进行省略的TD和DIV两种情况下的三种解决方案  

2014-11-12 17:38:50|  分类: 默认分类 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

文字内容或标题过长,用 ... 进行省略的TD和DIV两种情况下的三种解决方案

分类: css 2008-09-24 16:51 2696人阅读 评论(0) 收藏 举报

divfirefoxoperacssbordertable

DIV下的解决方案:

  1. <html>
  2. <head>
  3. <title>Style5.cn</title>
  4. <style type="text/css">
  5. /* 公共样式 */
  6. body { font-size: 14px; font-family:"宋体"; }
  7. a { color: Black; text-decoration: none; }
  8. a:hover { color: Blue; }
  9. /* 截取文字的盒子 */
  10. .autocut {
  11. width:200px;
  12. border:1px solid #333;
  13. overflow:hidden;
  14. white-space:nowrap;
  15. text-overflow:ellipsis;
  16. -o-text-overflow:ellipsis;
  17. -icab-text-overflow: ellipsis;
  18. -khtml-text-overflow: ellipsis;
  19. -moz-text-overflow: ellipsis;
  20. -webkit-text-overflow: ellipsis;
  21. }
  22. </style>
  23. </head>
  24. <body>
  25. <div class="autocut">
  26. <a href="http://www.style5.cn" title="TOP10热榜在图片上的半透明阴影效果">TOP10热榜在图片上的半透明阴影效果</a><br />
  27. <a href="http://www.style5.cn" title="说说最近读的书:无懈可击的Web设计">说说最近读的书:无懈可击的Web设计</a><br />
  28. </div>
  29. </body>
  30. </html>

上面的这种方案,在 IE7 和 Opera 中应该能够完美的体现出他的效果了。但是 Firefox 目前并不支持 CSS3 中的 text-overflow:ellipsis,所以这种方法还是有缺陷的,算是不完全版。

另外,在连接的 title 标签里加入完整的文章标题,这样想知道具体内容的浏览者就可以将鼠标放在连接上,看到完整的标题了。

解释一下起到关键作用的几行代码:

overflow:hidden;
/* 隐藏超出容器范围的文字 */
white-space:nowrap;
/* 强制文字将不自动换行 */
text-overflow:ellipsis;
/* 如果文字超出范围,将使用省略号标示出来 */
-o-text-overflow:ellipsis;
/* Opera 的私有属性,功能同上 */
-icab-text-overflow: ellipsis;
-khtml-text-overflow: ellipsis;
-moz-text-overflow: ellipsis;
/* 目前这段代码无效,为 Firefox 预留 */
-webkit-text-overflow: ellipsis;

TD下的解决方案(一):

  1. 1.只需要将表格宽度固定,然后在表格的Css定义中加入:table {
  2. width:484px;
  3. table-layout:fixed;
  4. }2.然后在表格单元格的Css定义中加入:td {
  5. ?? overflow:hidden;
  6. ?? text-overflow:ellipsis;
  7. }

TD下的解决方案(二):

  1. <table width="200" border="1" style="table-layout:fixed;">
  2. <tr>
  3. <td width="80" style="width:80px;overflow: hidden;text-overflow:ellipsis">
  4. <nobr>我是一个兵,来自老百姓</nobr></td>
  5. <td> </td>
  6. <td> </td>
  7. </tr>
  8. </table>
  评论这张
 
阅读(75)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017