`
圣诞王子
  • 浏览: 85049 次
  • 性别: 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在创建滚动条样式上的关键属性。CSS3...

    纯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实现超出文本指定宽度用省略号代替以及禁止文本换行。 1. **一般文字截断** 当我们希望文本在特定宽度后被截断并用省略号表示时,可以使用以下CSS样式: ```css .text-overflow { ...

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

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

    CSS实现单行、多行文本溢出显示省略号(…)

    CSS实现单行、多行文本溢出显示省略号(…)示例文档,自行下载查看

    利用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方言)文档样式的语言,它能让我们精确控制网页元素的布局和外观。...

    ie支持css3部分功能

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

    bootstrap表格内容过长时用省略号表示的解决方法

    为了实现内容过长时以省略号表示的效果,我们可以采用CSS样式来控制表格的显示。以下是具体解决方法的详细解释: 首先,我们创建一个基本的Bootstrap表格结构: ```html ;'>商品名称 ;'>详细介绍 ;'>购买...

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

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

    css表格样式打包下载

    - `margin`用于设置单元格之间的外部空间,但要注意,对于表格,浏览器默认会忽略`margin`,所以通常使用`border-spacing`代替。 6. **文本样式**: - `text-align`控制单元格内容的水平对齐,如左对齐、居中、右...

    CSS表格样式1

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

    IE6、IE7、IE8对css和js支持方面差异的研究

    在探讨IE6、IE7、IE8对CSS和JavaScript支持的差异时,我们可以发现一系列显著的兼容性问题和解析规则的变化。以下是对这些差异的详细分析: 1. **JavaScript性能和垃圾收集**: - 在IE6中,JScript引擎在处理大量...

Global site tag (gtag.js) - Google Analytics