`
圣诞王子
  • 浏览: 85228 次
  • 性别: 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实现单行、多行文本溢出显示省略号(…)示例文档,自行下载查看

    用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 ;'>商品名称 ;'>详细介绍 ;'>购买...

    纯CSS固定表头内容滚动表格

    "纯CSS固定表头内容滚动表格"是一种高效且用户友好的设计技巧,它允许用户在浏览长表格时始终保持表头可见,从而方便用户理解每一列的数据含义。这种设计方法尤其适用于那些包含大量数据且需要横向滚动查看的表格,...

    DIV 上下居中 多行 省略号

    在网页设计中,让`<div>`元素内的多行文本实现上下居中并添加省略号功能是一项常见的需求。这通常涉及到CSS布局、文本对齐和溢出隐藏等多个技术点。接下来,我们将深入探讨如何实现这个效果。 首先,我们要解决的是...

    CSS表格样式1

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

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

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

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

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

Global site tag (gtag.js) - Google Analytics