在实际开发的过程中,我们所使用的table的内容列中的内容往往太长,我们只想让它显示一部分内容该怎么办呢?
当然你可以通过程序后台对内容字段进行截断并加…来实现,但是那样效率肯定不如通过样式来控制!
在给出源码之前还是让我们先来了解一个跟本文要使用的技术有关的知识吧:
table的样式属性table-layout:
table-layout 版本:CSS2 兼容性:IE5+ 继承性:无
语法:
table-layout : auto | fixed
取值:
auto : 默认值。默认的自动算法。布局将基于各单元格的内容。表格在每一单元格内所有内容读取计算之后才会显示出来
fixed : 固定布局的算法。在这种算法中,表格和列的宽度取决于 col 对象的宽度总和,假如没有指定,则会取决于第一行每个单元格的宽度。假如表格没有指定宽度( width )属性,则表格被呈递的默认宽度为 100% 。
[自己总结]
如果指定了table的百分比,并且第一行的每个单元格的宽度之和小于table指定的百分比宽度,则按百分比显示;但是如果指定了table的百分比,并且第一行的每个单元格的宽度之和要大于table指定的百分比宽度,则按第一行的每个单元格的宽度之和显示;同理,如果table指定了固定值,也是同上面一样的呈现。
说明:(说明部分转载)
设置或检索表格的布局算法。
你可以通过此属性改善表格呈递性能。此属性导致IE以一次一行的方式呈递表格内容从而提供给信息用户更快的速度。此属性依据此下顺序使用其中一种方式 布置表格栏宽度:
使用 col 或 colGroup 对象的宽度( width )属性信息。
使用表格第一行内的单元格的宽度( width )信息。
依据表格列数等分表格宽度。而不考虑表格内容的实际宽度。
假如单元格的内容超过了列宽度,内容将会被换行。假如无法换行,则内容会被裁切。假如此属性被设置为 fixed ,则 overflow 能够被用于控制处理溢出单元格( td )宽度的内容。假如表格行高度被指定了,那么换行的内容如果超出了指定表格行高度也会在纵向上被裁切。
设置此属性值为 fixed ,有助于提高表格性能。对于长表格效果尤其显著。
设置表格行高可以进一步提高呈递速度,浏览器不需要检测行内每一个单元格内容去确定行高就可以开始解析以及呈递。
此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。
对应的脚本特性为 tableLayout 。
<table bgcolor="red" style="table-layout:fixed">
<tr>
<td style="width:100px;overflow: hidden; text-overflow:ellipsis;word-break:keep-all" >
这就是你看到的效果了,如果你没有看到的话就对了,如果所有的都看到了那你肯定是什么地方弄错了,没关系,再试试!
</td>
</tr>
</table>
还有一个满足IE FIREFOX等浏览器的公共样式:
.textoverflow a {
display:block;
width:120px;
margin: 0px 0px 0px 3px;
white-space: nowrap;
overflow: hidden;
float: left;
-o-text-overflow: ellipsis; /* for Opera */
text-overflow: ellipsis; /* for IE */
}
.textoverflow:after{
content: “…”;
}/* for Firefox */
@media all and (min-width: 0px){
.textoverflow:after{ content:""; /* for Opera */
}
}
分享到:
相关推荐
总之,通过`table-layout: fixed`和相关的CSS样式,我们可以有效地控制表格单元格内文本的显示长度,提高页面性能,并保证视觉效果的一致性。在实际项目中,根据具体需求灵活运用这些技术,能够提升用户体验,同时也...
总结,要让表格单元格内容不换行,单元格不被撑开,并在显示不下的时候在结尾处显示“...”,你需要通过CSS设置`white-space`、`overflow`和`text-overflow`属性,并为单元格设定一个固定的宽度。同时,确保所有可能...
7. JavaScript动态调整:如果需要在运行时动态调整单元格长度,可以使用JavaScript监听窗口的`resize`事件,根据需要计算并设置单元格的宽度。 通过上述方法,开发者可以根据具体项目需求,选择合适的技术实现表格...
在网页设计中,有时我们需要控制单元格中的文本显示,避免因为内容过长而引起不必要的换行或者撑宽单元格,从而影响页面布局的整洁性。这时,我们可以利用CSS(Cascading Style Sheets)的样式来实现文本超长省略的...
### CSS样式代码详解 #### 一、背景样式 Background **1. `background-attachment`**:此属性定义了背景图像是否固定或者随着页面滚动而滚动。 - **取值**: - `scroll`:背景图像随页面滚动(默认值)。 - `...
CSS3 中的多列显示样式是指通过 CSS 属性来控制文本或元素在页面上的布局方式,以达到多列显示的效果。本文将详细介绍 CSS3 中的多列显示样式1,包括 column-width 属性和 column-count 属性的使用方法,以及它们在...
### CSS样式收集大全知识点解析 #### 一、字体属性(Font Properties) 在CSS中,**字体属性**是用来控制文本外观的重要工具。以下是一些常用的字体属性及其解释: 1. **`font-size`**: 控制文字大小。 - `x-...
综上所述,处理`td`单元格内容的缩略显示问题,可以通过CSS样式、JavaScript插件、响应式设计以及前端框架的组件化方法来实现。具体选择哪种方案,取决于项目的需求、兼容性要求以及开发团队的技术栈。通过合理利用...
本资料包包含了一系列关于CSS样式的主题,包括背景、边距、长宽、表格、边界和段落等关键概念,旨在帮助初学者和开发者深入理解和应用CSS。 1. CSS_背景: - 背景颜色:用`background-color`属性设置元素的背景...
CSS样式 - **2.1 CSS背景** - **属性解析**:详细介绍背景相关的属性如`background-color`、`background-image`等。 - **案例分析**:提供实例说明如何设置背景颜色或图片。 - **2.2 CSS文本** - **文本属性**:...
在网页设计领域,CSS(Cascading Style Sheets)是不可或缺的一部分,它负责定义网页内容的样式和布局,使得网页更具视觉吸引力和易读性。CSS 2.0作为早期的重要版本,为网页设计者提供了丰富的样式控制功能,是理解...
为了避免这种情况,需要使用特定的CSS样式来控制内容的显示方式。 首先,“table-layput:fixed”可能是一个OCR识别错误,正确的应该是“table-layout: fixed”,这个属性用于设定表格布局算法的种类。当设置为...
- 构建CSS样式表的过程,涉及选择合适的元素和属性来达到设计目标。 - 包括编写、测试和调试CSS代码。 **Cm(厘米)** - 同“Centimeter”,在CSS中用于长度单位。 **Button(按钮)** - 用户界面中的交互元素,...
- **empty-cells**:设置是否显示表格中的空单元格。可选值为 `show` 或 `hide`。 示例:`empty-cells: show;` - **table-layout**:设置显示单元、行和列的算法。可选值包括 `auto` 和 `fixed`。 示例:`table...
- **打印样式表**:讲解如何为打印输出制定专门的CSS样式。 - **分页控制**:探讨如何通过CSS控制页面分隔符、页眉页脚等内容。 ##### 16. 删除自CSS2.1的内容 - **不再支持的特性**:列出那些已被废弃或删除的CSS...
在网页设计中,`DIV+CSS`是一种常见的布局技术,它通过CSS(层叠样式表)来控制HTML元素的样式,使得页面结构更加清晰,样式表现与内容分离。本篇将详细解析一些核心的CSS属性设置参数。 首先,`line-height`属性...
5. **CSS样式**:为了增强用户体验,开发者可能会使用CSS来调整编辑模式下单元格的样式,如边框、背景色、字体等。 6. **响应式设计**:考虑到不同设备的屏幕尺寸,可能还需要实现响应式布局,确保在手机和平板等...
CSS样式通过链接或嵌入的方式应用于HTML文档中。可以通过内联样式、内部样式表或者外部样式表三种方式添加CSS: - **内联样式**:直接写在HTML标签中,如`;">Hello World!</p>`。 - **内部样式表**:放在`<head>`...
1. CSS样式冲突:Bootstrap Table 自带的 CSS 样式可能与其他库或自定义样式发生冲突,导致元素的 padding、margin 或是 vertical-align 属性设置不当。 2. 浏览器兼容性:不同浏览器对 CSS 的解析和渲染可能存在...