主要代码:
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实现超长字段用省略号代替 td的属性中注意nowrap有效不能设置width,但是可以设置table的width
在给定的“CSS实现多行文字显示省略号效果.zip”压缩包中,包含了一个名为“2.css”的样式表文件,它使用了`-webkit-line-clamp`属性来指定省略的行数,以及一个“1.html.txt”的HTML文件,用于展示这个效果。...
CSS 省略号 完美解决 鼠标放上显示不能看部分的内容
本文将详细介绍如何仅使用CSS来实现文本超出部分用省略号(...)显示的效果。 #### CSS实现原理 1. **`display:block;`**:此属性用于设置元素为块级元素。在本例中,将容器设置为块级元素,以便更好地控制其布局...
CSS实现长标题用省略号显示,以前用JS用网络语言实现,其实CSS也可以的 不错哦~
4. **背景色**:使用 `background-color` 属性可以改变表格、行或单元格的背景颜色,如 `background-color: #f0f0f0;`。 5. **文字对齐**:`text-align` 属性用于设置文本水平对齐,如 `text-align: center;`。`...
本话题主要涉及以下几个关键知识点:表格题头的拖动、超出宽度显示省略号、滚动条的使用以及跨浏览器兼容性,特别是针对IE、Firefox(FF)和Safari这三大主流浏览器。 1. **表格题头拖动**:这是一种交互设计特性,...
css动画的一个应用,与此前的css走马灯同样的内容。只是一次不同的应用,具体实现如下 序号 姓名 年龄 性别 专业 </ul>
本文将深入探讨如何使用CSS实现超出文本指定宽度用省略号代替以及禁止文本换行。 1. **一般文字截断** 当我们希望文本在特定宽度后被截断并用省略号表示时,可以使用以下CSS样式: ```css .text-overflow { ...
html单元格显示不下的文本用省略号代替,并且鼠标悬停在单元格下面用div显示该单元格的全部文本信息。
`表示当内容溢出时,用省略号“...”来代替;而`overflow: hidden;`则隐藏超出边界的文本。 接下来是`white-space`属性,它控制元素内的空白字符如何处理。为了使文字在一行内显示并触发`text-overflow`效果,我们...
"利用JS+CSS实现滚动表格数据展示"是一个常见的需求,它可以帮助用户逐行浏览大量的信息,而无需手动调整窗口大小。下面将详细介绍如何通过JavaScript(JS)和层叠样式表(CSS)来实现这一功能。 首先,我们需要...
由于`max-width`属性在IE6和IE7中不受支持,所以对于这些老版本的IE浏览器,我们需要使用`width`属性代替。同时,由于`::after`伪元素在IE8及以下版本不支持,所以这部分用户可能看不到省略号。为确保兼容性,可以...
在网页设计中,为了模拟Excel表格的样式和功能,我们可以借助CSS(层叠样式表)来实现。CSS是一种用于描述HTML或XML(包括如SVG、MathML等各种XML方言)文档样式的语言,它能让我们精确控制网页元素的布局和外观。...
本篇文章将深入探讨如何使用CSS来实现表格(TABLE)的样式美化以及添加全选功能。 一、表格样式的基本设置 1. 表格边框:通过`border`属性可以设置表格的整体边框,如`border: 1px solid #ccc;`。为了使表格中的每...
CSS3Pie是一个开源JavaScript库,通过VML(Vector Markup Language)技术,使IE6-IE8也能支持圆角效果。只需在HTML文件中引入PIE.js,然后在需要圆角的元素上添加`behavior: url(/path/to/PIE.htc)`,即可实现兼容。...
这是一段非常非常长的文本,它超过了我们想要显示的字符数限制,所以我们需要用HTML和CSS来实现超出部分用省略号表示。 ``` 接下来,我们需要在CSS中应用样式来实现省略号效果。通常,我们会使用`white-space`、`...
在早期的Web开发中,IE6(Internet Explorer 6)作为一个流行但又充满挑战的浏览器,因其对现代CSS标准的支持不足而闻名。然而,开发者们总是寻找方法来扩展其功能,使其能够支持更多的CSS3属性。标题“ie6实现css3...
div+css百分比表格+DIV+CSS+JS静态分页程序+DIV+...内容不多但是绝对实用,其实在做数据显示时还是推荐用表格,因为不是所有的地方数据显示有用DIV+CSS,在数据显示时表格还是有很大的优势。不过这个还是要看个人爱好!
在CSS(层叠样式表)中,表格样式是网页设计中的一个重要组成部分,它能帮助我们打造出美观且功能丰富的数据展示区域。这篇博文“CSS表格样式1”可能详细讲解了如何利用CSS来定制HTML表格的外观和布局。由于描述中...