`
toyota2006
  • 浏览: 551449 次
  • 性别: 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”压缩包中,包含了一个名为“2.css”的样式表文件,它使用了`-webkit-line-clamp`属性来指定省略的行数,以及一个“1.html.txt”的HTML文件,用于展示这个效果。...

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

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

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

    为了解决这个问题,我们可以使用 CSS 的类选择器来定义表格的宽度。例如: ```css .divcss5 { width: 300px; } ``` 然后,在 HTML 代码中,我们可以添加这个类来应用这个宽度定义。例如: ```html ...

    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 省略号 完美解决 鼠标放上显示不能看部分的内容

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

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

    用CSS实现超长字段被省略的简单方法.rar

    `表示当内容溢出时,用省略号“...”来代替;而`overflow: hidden;`则隐藏超出边界的文本。 接下来是`white-space`属性,它控制元素内的空白字符如何处理。为了使文字在一行内显示并触发`text-overflow`效果,我们...

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

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

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

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

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

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

    纯css控制超出部分省略号显示

    本文将详细介绍如何仅使用CSS来实现文本超出部分用省略号(...)显示的效果。 #### CSS实现原理 1. **`display:block;`**:此属性用于设置元素为块级元素。在本例中,将容器设置为块级元素,以便更好地控制其布局...

    《编写高质量代码 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 ...

    8款好看的css表格.rar

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

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

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

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

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

    css span宽度设置生效.docx

    CSS span 宽度设置生效方法总结 在 HTML 文档中,span 标签是常用的内联元素,用于标记文本或内联内容。然而,当我们需要设置 span 的宽度时,发现 span 标签的宽度设置并不能生效。这是因为 span 标签不是块级元素...

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

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

    CSS模拟出的Excel表格效果.rar

    本教程将介绍如何使用CSS来模拟Excel表格效果,使你的网页数据展示更具吸引力和专业性。 首先,我们需要一个基础的HTML结构来承载我们的“表格”。这通常包括一系列的`&lt;div&gt;`元素,用于表示行,以及在这些行内的`...

    动态省略号.html

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

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

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

Global site tag (gtag.js) - Google Analytics