`
圣诞王子
  • 浏览: 84620 次
  • 性别: Icon_minigender_1
  • 来自: 南京
社区版块
存档分类
最新评论

4行CSS实现【表格内容超过一行的部分,用省略号代替】【支持IE6】

 
阅读更多

主要代码:

 

table{

  table-layout: fixed;

}

td{

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

}

 

原理:

本方法用于解决表格单元格 内容过多时的美观问题,主要涉及到4句CSS样式:

1. table-layout: fixed  由于table-layout的默认值是auto,即table的宽高将取决于其内容的多寡,如果内容的体积无法估测,那么最终表格的呈现形式也无法保证了,fixed一下就好了。(注意:此样式是关键)

2. white-space: nowrap 是为了保证无论单元格(TD)中文本内容有多少,都不会自动换行,此时多余的内容会在水平方向撑破单元格。

3. overflow: hidden 隐藏超出单元格的部分。

4. text-overflow: ellipsis 将被隐藏的那部分用省略号代替。

 

效果图:

 

 

转转:http://www.cnblogs.com/warrentech/archive/2012/05/09/table_ellipsis.html

分享到:
评论

相关推荐

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

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

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

    在给定的“CSS实现多行文字显示省略号效果.zip”压缩包中,包含了一个名为“2.css”的样式表文件,它使用了`-webkit-line-clamp`属性来指定省略的行数,以及一个“1.html.txt”的HTML文件,用于展示这个效果。...

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

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

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

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

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

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

    html纯css实现表格样式

    4. **背景色**:使用 `background-color` 属性可以改变表格、行或单元格的背景颜色,如 `background-color: #f0f0f0;`。 5. **文字对齐**:`text-align` 属性用于设置文本水平对齐,如 `text-align: center;`。`...

    表格 题头拖动 超出宽度显示省略号(中文亦可) 滚动条 兼容IE,FF,safari

    本话题主要涉及以下几个关键知识点:表格题头的拖动、超出宽度显示省略号、滚动条的使用以及跨浏览器兼容性,特别是针对IE、Firefox(FF)和Safari这三大主流浏览器。 1. **表格题头拖动**:这是一种交互设计特性,...

    通过css动画实现一个表格滚动轮播效果

    css动画的一个应用,与此前的css走马灯同样的内容。只是一次不同的应用,具体实现如下 序号 姓名 年龄 性别 专业 </ul>

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

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

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

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

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

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

    利用JS+CSS实现滚动表格数据展示

    "利用JS+CSS实现滚动表格数据展示"是一个常见的需求,它可以帮助用户逐行浏览大量的信息,而无需手动调整窗口大小。下面将详细介绍如何通过JavaScript(JS)和层叠样式表(CSS)来实现这一功能。 首先,我们需要...

    用css使单行超出指定宽度的内容切去并在结尾出现省略号

    由于`max-width`属性在IE6和IE7中不受支持,所以对于这些老版本的IE浏览器,我们需要使用`width`属性代替。同时,由于`::after`伪元素在IE8及以下版本不支持,所以这部分用户可能看不到省略号。为确保兼容性,可以...

    利用CSS仿Excel表格的效果

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

    CSS实现表格样式及全选功能

    本篇文章将深入探讨如何使用CSS来实现表格(TABLE)的样式美化以及添加全选功能。 一、表格样式的基本设置 1. 表格边框:通过`border`属性可以设置表格的整体边框,如`border: 1px solid #ccc;`。为了使表格中的每...

    ie支持css3部分功能

    CSS3Pie是一个开源JavaScript库,通过VML(Vector Markup Language)技术,使IE6-IE8也能支持圆角效果。只需在HTML文件中引入PIE.js,然后在需要圆角的元素上添加`behavior: url(/path/to/PIE.htc)`,即可实现兼容。...

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

    这是一段非常非常长的文本,它超过了我们想要显示的字符数限制,所以我们需要用HTML和CSS来实现超出部分用省略号表示。 ``` 接下来,我们需要在CSS中应用样式来实现省略号效果。通常,我们会使用`white-space`、`...

    ie6实现css3属性

    在早期的Web开发中,IE6(Internet Explorer 6)作为一个流行但又充满挑战的浏览器,因其对现代CSS标准的支持不足而闻名。然而,开发者们总是寻找方法来扩展其功能,使其能够支持更多的CSS3属性。标题“ie6实现css3...

    div+css百分比表格+DIV+CSS+JS静态分页程序+DIV+CSS像素表格

    div+css百分比表格+DIV+CSS+JS静态分页程序+DIV+...内容不多但是绝对实用,其实在做数据显示时还是推荐用表格,因为不是所有的地方数据显示有用DIV+CSS,在数据显示时表格还是有很大的优势。不过这个还是要看个人爱好!

    CSS表格样式1

    在CSS(层叠样式表)中,表格样式是网页设计中的一个重要组成部分,它能帮助我们打造出美观且功能丰富的数据展示区域。这篇博文“CSS表格样式1”可能详细讲解了如何利用CSS来定制HTML表格的外观和布局。由于描述中...

Global site tag (gtag.js) - Google Analytics