`
toyota2006
  • 浏览: 550814 次
  • 性别: 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='...')}}

相关推荐

    css3文字标签云3D旋转特效.rar

    css3文字标签云3D旋转特效.rar css3文字标签云3D旋转特效.rar css3文字标签云3D旋转特效.rar css3文字标签云3D旋转特效.rar css3文字标签云3D旋转特效.rar css3文字标签云3D旋转特效.rar css3文字标签云3D旋转特效....

    CSS:CSS列表与表格样式的全面指南.docx

    CSS:CSS列表与表格样式的全面指南.docx

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

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

    CSS超出文本指定宽度用省略号代替和文本不换行

    本文将深入探讨如何使用CSS实现超出文本指定宽度用省略号代替以及禁止文本换行。 1. **一般文字截断** 当我们希望文本在特定宽度后被截断并用省略号表示时,可以使用以下CSS样式: ```css .text-overflow { ...

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

    这时,CSS(层叠样式表)提供了一种方法,可以将超出容器宽度的文本用省略号“...”来代替。这个功能主要通过组合使用几个CSS属性来实现,包括`width`、`overflow`、`text-overflow`以及`white-space`。接下来,我们...

    HTML+css 超出字符省略号表示

    在网页设计中,有时我们需要对过长的文字内容进行截断,并用省略号(...)来表示被省略的部分。这种技术在HTML和CSS中可以通过简单的设置实现。本主题主要探讨如何利用HTML和CSS实现超出字符数后显示省略号的效果。 ...

    CSS文本超出2行就隐藏并且显示省略号

    //溢出用省略号显示 white-space:nowrap; //溢出不换行 但是第三条属性,只能显示一行,不能用在这里,那么如果显示多行呢? 超出两行隐藏: css3解决了这个问题,解决方法如下: display:-webkit-box; //将对象作为...

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

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

    8款好看的css表格.rar

    2. **颜色与背景**:通过CSS,我们可以为表格添加各种颜色,包括单元格背景色、边框颜色、文字颜色等,以增强视觉效果。同时,还可以应用渐变、图案或者图片作为背景,提升表格的美观度。 3. **边框与边框样式**:...

    使用CSS不用程序实现文字自动截断 用省略号代替

    使用CSS实现文字自动截断用省略号代替 在Web开发中,经常需要对文字进行截断,以便适应不同的屏幕尺寸和布局。传统的方法是使用JavaScript来实现文字截断,但这需要编写复杂的代码并且需要考虑浏览器的兼容性问题。...

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

    1.文字在超出长度时,如何实现用省略号代替? 2.超长长度的文字在省略显示后,如何在鼠标悬停时,以悬浮框的形式显示出全部信息? 文字在超出长度时,如何实现用省略号代替? 用CSS实现超长字段用省略号表示的方法:所有...

    js文本超出长度用省略号代替,鼠标悬停div显示

    html单元格显示不下的文本用省略号代替,并且鼠标悬停在单元格下面用div显示该单元格的全部文本信息。

    网页中字段太长,省略号表示。css显示

    在网页设计中,有时我们需要处理过长的文本字段,使其在有限的空间内显示部分内容并以省略号(...)结尾,以保持页面整洁且易于阅读。这种效果可以通过CSS(层叠样式表)来轻松实现。本文将深入探讨如何使用CSS实现...

    如何通过CSS样式设置单元格显示内容的长度.doc

    当内容过长,我们不希望它完全显示,而是希望通过CSS样式将其截断,并用省略号表示被隐藏的部分。本文将详细介绍如何通过CSS样式实现这一功能,同时结合`table-layout`属性来优化表格的布局性能。 首先,`table-...

    动态省略号.html

    纯css实现,亲测html5、vue、jsp适用,状态后面省略号动态展示,速度可调

    前端样式 分页中间是省略号

    "前端样式 分页中间是省略号"这个标题表明我们讨论的是一个关于分页组件的设计,其中在分页条目之间使用了省略号来表示中间的页面数。这种设计通常用于当页面数量过多,无法全部显示时,用省略号来简化用户界面,...

    利用CSS仿Excel表格的效果

    在网页设计中,为了模拟Excel表格的样式和功能,我们可以借助CSS(层叠样式表)来实现。CSS是一种用于描述HTML或XML(包括如SVG、MathML等各种XML方言)文档样式的语言,它能让我们精确控制网页元素的布局和外观。...

    使用 HTML、CSS 和 JS 的简单倒数计时器.zip

    总的来说,"使用 HTML、CSS 和 JS 的简单倒数计时器"项目提供了一个基础的倒计时器实现,展示了这三种技术在网页动态功能中的协同作用。开发者可以根据自己的需求进行调整和扩展,以适应各种实际应用场景。

    CSS实现标题文字过长部分显示省略号的方法

    在Web开发中,为了提升用户的阅读体验,常常需要对长文本进行截断处理,特别是在标题或列表项中,当内容超出预设空间时,显示省略号(...)是一种常见的做法。以下将详细介绍如何使用CSS实现单行和多行文本溢出时...

    一些漂亮的CSS表格样式

    一些非常漂亮实用的CSS表格样式,使用方便.页面简洁!

Global site tag (gtag.js) - Google Analytics