`
toyota2006
  • 浏览: 544249 次
  • 性别: Icon_minigender_1
  • 来自: 石家庄
社区版块
存档分类
最新评论

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

阅读更多
<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>
分享到:
评论
8 楼 kaowww153 2010-03-16  
难道就没有一个游览器全兼容的吗
7 楼 dsjt 2010-01-24  
楼主的代码
其中一单元格内容换成中文就出问题了
6 楼 wukele 2009-12-13  
还不错,起码在ie中不用程序判断长度了
5 楼 topcode 2009-12-11  
only IE
4 楼 bluemeteor 2009-12-09  
cxd110 写道
firefox不能正常显示


正解,FF的解决方案请搜索ellipsis.xml
3 楼 cxd110 2009-12-09  
firefox不能正常显示
2 楼 zbm2001 2009-12-09  
binlaniua 写道
Jinja2模板
直接用一个filter就可以了

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


若是字体样式定义大一些

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

若是采用了非等宽字体

……以上等着走光喽

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

1 楼 binlaniua 2009-12-08  
Jinja2模板
直接用一个filter就可以了

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

相关推荐

    CSS实现文字多行省略效果.zip_朋友圈文字最后变成省略号

    CSS实现多行文字显示省略号效果.zip

    CSS实现超长字段用省略号代替

    CSS实现超长字段用省略号代替 td的属性中注意nowrap有效不能设置width,但是可以设置table的width

    HTML CSS 省略号代码 超过长度省略号显示点击全部可以显示等 超出范围自动变成省略号,但鼠标可以选择文字,酷吧……

    HTML CSS 省略号代码 超过长度省略号显示点击全部可以显示等 超出范围自动变成省略号,但鼠标可以选择文字,酷吧……

    css table width表格宽度样式设置定义.docx

    css table width表格宽度样式设置定义.docx

    CSS文本超出div或者span时用省略号代替

    在项目中我们经常需要在文本过长时显示,将文本超出的部分内容用省略号代替: 思想为: 首先设置宽度,然后让超出的部分隐藏 如果有超出则在最后显示省略号 让文本不换行 具体css代码为: 复制代码代码如下:.title{...

    CSS 省略号 完美解决 鼠标放上显示不能看部分的内容

    CSS 省略号 完美解决 鼠标放上显示不能看部分的内容

    用CSS样式定义的圆角表格

    网页特效用CSS样式定义的圆角表格......................

    CSS实现长标题用省略号显示

    CSS实现长标题用省略号显示,以前用JS用网络语言实现,其实CSS也可以的 不错哦~

    精通CSS与HTML设计模式.part02.rar

    书中包含了350 多种可以立即使用的设计模式(涉及文本、背景、边框、图片、表格、布局等多方面),并介绍了每种模式的原理和使用。每种设计模式、示例和源代码都经过了精心设计,易于实现和使用。通过阅读此书,可...

    精通CSS与HTML设计模式.part10.rar

    书中包含了350 多种可以立即使用的设计模式(涉及文本、背景、边框、图片、表格、布局等多方面),并介绍了每种模式的原理和使用。每种设计模式、示例和源代码都经过了精心设计,易于实现和使用。通过阅读此书,可...

    精通CSS与HTML设计模式.part04.rar

    书中包含了350 多种可以立即使用的设计模式(涉及文本、背景、边框、图片、表格、布局等多方面),并介绍了每种模式的原理和使用。每种设计模式、示例和源代码都经过了精心设计,易于实现和使用。通过阅读此书,可...

    精通CSS与HTML设计模式.part09.rar

    书中包含了350 多种可以立即使用的设计模式(涉及文本、背景、边框、图片、表格、布局等多方面),并介绍了每种模式的原理和使用。每种设计模式、示例和源代码都经过了精心设计,易于实现和使用。通过阅读此书,可...

    精通CSS与HTML设计模式.part11.rar

    书中包含了350 多种可以立即使用的设计模式(涉及文本、背景、边框、图片、表格、布局等多方面),并介绍了每种模式的原理和使用。每种设计模式、示例和源代码都经过了精心设计,易于实现和使用。通过阅读此书,可...

    精通CSS与HTML设计模式.part01.rar

    书中包含了350 多种可以立即使用的设计模式(涉及文本、背景、边框、图片、表格、布局等多方面),并介绍了每种模式的原理和使用。每种设计模式、示例和源代码都经过了精心设计,易于实现和使用。通过阅读此书,可...

    精通CSS与HTML设计模式.part03.rar

    书中包含了350 多种可以立即使用的设计模式(涉及文本、背景、边框、图片、表格、布局等多方面),并介绍了每种模式的原理和使用。每种设计模式、示例和源代码都经过了精心设计,易于实现和使用。通过阅读此书,可...

    精通CSS与HTML设计模式.part08.rar

    书中包含了350 多种可以立即使用的设计模式(涉及文本、背景、边框、图片、表格、布局等多方面),并介绍了每种模式的原理和使用。每种设计模式、示例和源代码都经过了精心设计,易于实现和使用。通过阅读此书,可...

    精通CSS与HTML设计模式.part05.rar

    书中包含了350 多种可以立即使用的设计模式(涉及文本、背景、边框、图片、表格、布局等多方面),并介绍了每种模式的原理和使用。每种设计模式、示例和源代码都经过了精心设计,易于实现和使用。通过阅读此书,可...

    精通CSS与HTML设计模式.part06.rar

    书中包含了350 多种可以立即使用的设计模式(涉及文本、背景、边框、图片、表格、布局等多方面),并介绍了每种模式的原理和使用。每种设计模式、示例和源代码都经过了精心设计,易于实现和使用。通过阅读此书,可...

    精通CSS与HTML设计模式.part07.rar

    书中包含了350 多种可以立即使用的设计模式(涉及文本、背景、边框、图片、表格、布局等多方面),并介绍了每种模式的原理和使用。每种设计模式、示例和源代码都经过了精心设计,易于实现和使用。通过阅读此书,可...

    《编写高质量代码 web前端开发修炼之道》中的base.css下载

    base.css base.css base.css base.css base.css base.css base.css base.css base.css base.css base.css base.css base.css base.css base.css base.css base.css base.css base.css base.css base.css base.css ...

Global site tag (gtag.js) - Google Analytics