`

让TD支持完美支持overflow:hidden的CSS实现(转)

 
阅读更多
让TD支持完美支持overflow:hidden的CSS实现(转)
直接在TD上使用OVERFLOW:HIDDEN是无效的,百度之,多半的结论是使用DIV插入TD再使用OVERFLOW
显然这不是追求精简的我们所要的,即便不考虑在大量的TD时的工作量
有人提议 为其table定义宽度,并使用 table-layout : fixed ,结合white-space: nowrap 实现了
<style>
table{ border:1px solid blue;border-collapse:collapse; width:304px;table-layout:fixed;}
td{border:1px solid blue; height:25px;overflow:hidden; white-space:nowrap;}
</style>
<table>
<tr>
    <td>一二三四五六七八九</td>
    <td>一二三四五六七八九</td>
    <td>一二三四五六七八九</td>
</tr>
<tr>
    <td>by:cike.org</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
</tr>
</table>
问题又来了,现实中我们用表格列宽常是不等的,如第一列为80px,再看TD又换行了
……
<td style="width:80px">一二三四五六七八九</td>
<td>一二三四五六七八九</td>
<td>一二三四五六七八九</td>
……
再次埋头实验-失败-实验…… 答案揭晓 white-space:pre,已通过IE6、7、8B1、FF23、Opera9
<style>
table{border:1px solid blue;border-collapse:collapse; width:304px;table-layout:fixed}
td{border:1px solid blue; height:25px;white-space:pre;overflow:hidden}
.w80{ width:80px}
</style>
<table>
<tr>
    <td class="w80">一二三四五六七八九</td>
    <td>一二三四五六七八九</td>
    <td>一二三四五六七八九</td>
</tr>
<tr>
    <td>by:<a href=">
    <td>&nbsp;</td>
    <td>&nbsp;</td>
</tr>
</table>

总结:当td无宽度值时,table{width*;table-layout:fixed;}+td{white-space:nowrap/pre} td将展现为等宽;当TD有指定值时white-space只能为pre,为了省力,推荐在两种情况下都使用white-space:pre
疑惑:为什么指定宽度会使nowrap无效,知道的请分享
原文地址:http://blog.cike.org/2008b/246.shtml
分享到:
评论

相关推荐

    css之使table也能overflow:hidden

    然而,直接在td元素上应用overflow:hidden并不如在div元素上那样有效,因为td元素默认的行为是让文本换行显示。要想实现类似div的隐藏效果,需要对td的white-space属性进行特定设置。 首先,我们需要了解CSS的white...

    通过css样式控制单元格文本超长省略.doc

    同样,我们使用`overflow: hidden`和`text-overflow: ellipsis`来实现文本的省略。 值得注意的是,`text-overflow: ellipsis`在某些旧版本的浏览器(如IE6)中可能不支持,因此在实际应用中可能需要考虑浏览器兼容...

    css文本换行属性word-wrap和white-space使用总结

    今天碰到了td文字内容不换行,发现是:white-space: nowrap,即强制文本不进行换行,顺便看了... overflow:hidden; IE 下没有任何问题,在 FF 下,长串英文会被遮住超出的内容 table中td.th强制换行方法: 复制代码

    原生JS实现列表内容自动向上滚动效果

     (红色边框为可视区域div,此处为了方便查看效果去除overflow:hidden;)  2. 样式方面:由于要滚动,所以必须2个ul的高度 &gt; 外层可视div高度,且div必须设置overflow:hidden; 代码实现 HTML: 第一条 &...

    css overflow溢出隐藏(文字溢出时的自动隐藏处理)

    如果table-layout属性被设置为fixed,并且overflow属性被设定为hidden、scroll或auto,那么超出td尺寸的内容将会被隐藏。如果overflow属性值为visible,则溢出的内容会被显示出来,可能导致内容在td单元格之外溢出。...

    table 中,如何使得单元格的内容不换行,单元格不被撑开,显示不下的时候在结尾处显示“...”

    总结,要让表格单元格内容不换行,单元格不被撑开,并在显示不下的时候在结尾处显示“...”,你需要通过CSS设置`white-space`、`overflow`和`text-overflow`属性,并为单元格设定一个固定的宽度。同时,确保所有可能...

    css实现不再让内容把td撑开的常用解决方法

    在网页设计中,经常遇到一个问题,即表格中的单元格(td)内容过多时,会导致单元格自动撑大,影响整体布局。为了解决这个问题,我们可以采用CSS来控制单元格的内容显示,使其不再自动撑开单元格。下面我们将详细...

    jquery 截取长文本和css

    方法一:用CSS截断字符串:IE,FireFox,Opera ,Safari都兼容 .subLongText{ width:150px; height:24px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; text-overflow: ellipsis;/* IE/Safari */ ...

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

    2. 为表格单元格(td)设置 `overflow: hidden;`,隐藏超出的内容。 3. 使用 `text-overflow: ellipsis;` 添加省略号,表示内容被截断。 4. 应用 `white-space: nowrap;` 禁止文本换行,保证内容在单行显示。 通过...

    CSS实现table td中文字的省略与显示(兼容IE与FF、Chrome)

    总结来说,CSS实现table td中文字的省略与显示,主要是通过组合使用`overflow`, `white-space`, `text-overflow`等属性,并考虑浏览器兼容性,来达到在有限空间内展示信息的目的。通过鼠标悬停时改变CSS样式,可以...

    CSS通用样式基本文档

    ### CSS通用样式基本文档知识点解析 #### 一、概述 本文档主要介绍了一套用于前端开发的CSS通用样式集合,适用于新手及前端学习者。通过规范化的CSS样式编写,可以帮助开发者更加高效、一致地构建网站界面。下面将...

    如何通过CSS样式设置单元格显示内容的长度.doc

    本文将详细介绍如何通过CSS样式实现这一功能,同时结合`table-layout`属性来优化表格的布局性能。 首先,`table-layout`属性是CSS中用于设定表格布局算法的关键。默认情况下,表格布局(`table-layout: auto`)会根据...

    css浏览器兼容问题

    CSS浏览器兼容问题一直是前端开发中的一大挑战,不同的浏览器在解析CSS样式时可能存在差异,这给开发者带来了诸多困扰。以下是一些常见的CSS兼容性问题及解决方案: 1. **默认的内外边距不同问题**: 解决方法:...

    html中表格td内容自动换行

    在 Firefox 中不支持 `word-break` 属性,所以我们需要加 `overflow: hidden;` 来解决。 属性介绍 在这里,我们介绍了三种属性: * `white-space`:空白的处理方式,有两个属性值:normal 和 nowrap。在 IE6 中只...

    td单元格内容缩略显示问题

    综上所述,处理`td`单元格内容的缩略显示问题,可以通过CSS样式、JavaScript插件、响应式设计以及前端框架的组件化方法来实现。具体选择哪种方案,取决于项目的需求、兼容性要求以及开发团队的技术栈。通过合理利用...

    html和css基础

    2. 隐藏超出部分:可以使用overflow:hidden;来隐藏超出部分的内容。 3. 设置固定宽度:可以使用width:100px;来设置固定宽度。 4. 临时加边框:可以使用border:1px solid;来临时加边框。 5. 使用!important;来设置IE...

    css之自动换行.pdf

    在CSS布局中,自动换行是一个常见的需求,特别是在处理文本内容时。文本可能会包含各种字符类型,如连续的数字、英文字符,甚至不同语言的文字。本文主要探讨如何使用CSS来解决自动换行的问题,特别是针对IE和Fire...

Global site tag (gtag.js) - Google Analytics