论坛首页 入门技术论坛

使用 CSS来完成 表格、span 中用省略号 ...代替过长文字

浏览 8245 次
该帖已经被评为新手帖
作者 正文
   发表时间:2009-12-08   最后修改:2009-12-08
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
table{table-layout: fixed}
td {text-overflow:ellipsis;overflow: hidden;}
span {display:block;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;/*just for IE */}
</style>
</head>
<body>
<table border="1" width="355px" >
<tr >
 <td>aaaaaaaaaaaaaaaaaaa!</td>
 <td title="">aaaaaaaaaaaaaaa</td>    
<td>123333333333333333333333333333333333</td>
<td>123333333333333333333333333333333333</td>
<td>123333333333333333333333333333333333</td>
<td><center><span  style='background-color: transparent;' title=11:00---24:00>11:00---24:00</center></span<td>
</tr>
</table>
<body>
</html>
   发表时间:2009-12-08  
Jinja2模板
直接用一个filter就可以了

{{showContent|truncate(length=20,end='...')}}
0 请登录后投票
   发表时间:2009-12-09  
binlaniua 写道
Jinja2模板
直接用一个filter就可以了

{{showContent|truncate(length=20,end='...')}}


若是字体样式定义大一些

若是掺杂了中英文字体(或其他语言)

若是采用了非等宽字体

……以上等着走光喽

总之,后台输出对前端表现的控制具有不可预知性,至少要有约定和权衡,完全依赖它更是不可取

0 请登录后投票
   发表时间:2009-12-09  
firefox不能正常显示
0 请登录后投票
   发表时间:2009-12-09  
cxd110 写道
firefox不能正常显示


正解,FF的解决方案请搜索ellipsis.xml
0 请登录后投票
   发表时间:2009-12-11  
only IE
0 请登录后投票
   发表时间:2009-12-13  
还不错,起码在ie中不用程序判断长度了
0 请登录后投票
   发表时间:2010-01-24  
楼主的代码
其中一单元格内容换成中文就出问题了
0 请登录后投票
   发表时间:2010-03-16  
难道就没有一个游览器全兼容的吗
0 请登录后投票
论坛首页 入门技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics