让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> </td>
<td> </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> </td>
<td> </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
分享到:
相关推荐
overflow用在div上时很好用,但直接用在td上,好像没有任何效果。td中的文本过长时依然自动换了一行像下面这要设定一下就行了
所谓省略就是把多余的字以“…”显示出来,而显示则是当鼠标移动到td上时,把省略的字重新显示出来。对于一个table,兼容IE与FF、Chrome的省略方式CSS写法: 复制代码代码如下: table{ width:200px; table-layout: ...
方法一:用CSS截断字符串:IE,FireFox,Opera ,Safari都兼容 .subLongText{ width:150px; height:24px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; text-overflow: ellipsis;/* IE/Safari */ ...
overflow:hidden;word-break:keep-all;text-overflow:ellipsis} </style> <table border=1> <tr> <td width=”30%”>dd</td> <td>...
2. 隐藏超出部分:可以使用overflow:hidden;来隐藏超出部分的内容。 3. 设置固定宽度:可以使用width:100px;来设置固定宽度。 4. 临时加边框:可以使用border:1px solid;来临时加边框。 5. 使用!important;来设置IE...
在w3cschool中css3中有个文本相关的属性text-overflow,当把它设为ellipsis时文本溢出内容就能显示为省略标记,而设为clip时就能把文本溢出的部分裁切掉,当然,前提是设置好两个属性,那就是white-space:nowrap...
为了兼容不同浏览器,可能要使用不同的清除浮动元素组合使用,如:{overflow:hidden; zoom:1;}、{display:table; width:100%;}、{overflow:hidden; height:1%;} 以下分析了部份的消除浮动元素对浏览器的支持: 运行...
为了防止文章标题过长超过容器(td,div)宽度而显示成多行,我们通常要对标题进行处理让其显示在一行,通常使用的方法有两种:一种方法是在客户端用CSS设置容器的overflow属性;另一种方法则是在服务器端用left函数对...
本文实例为大家分享了js实现表格循环滚动的具体代码,供大家参考,具体内容如下 css table{width: 500px;border: 1px solid gray;...overflow: hidden;position: relative;} .tab-scroll{position: absolu
功能很实用,代码非常的简单 效果1. 效果2. 样式代码如下: 代码如下: body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,br,pre,form,fieldset,input,textarea,p,blockquote,... color:red } .box_all{ overflow:hidden;
代码如下: <!DOCTYPE html PUBLIC “-/... <body> <style type=”text/css”> table {width:200px;table-layout:fixed;} td {white-space:nowrap;overflow:hidden;word-break:keep-all;} </style>
版本:CSS2 兼容性:IE4+ NS6+ 继承性:无语法:overflow : visible | auto | hidden | scroll 相关参数说明如下: visible::不剪切内容也不添加滚动条。假如显式声明此默认值,对象将被剪切为包含对象的window...
CSS: 代码如下:body{margin:0px;padding:0px;-moz-user-select:none;cursor:default;} .tabEditDiv{position:absolute;width:15px;height:15px;cursor:pointer;}.seltab{position:absolute;width:15px;height:15px;...
overflow:hidden}#ftConw{width:720px;margin:0 auto}body{font:12px arial;text-align:;background:#fff}body,p,form,ul,li{margin:0;padding:0;list-style:none}body,form,#fm{position:relative}td{text-align:...
今天碰到了td文字内容不换行,发现是:white-space: nowrap,即强制文本不进行换行,顺便看了... overflow:hidden; IE 下没有任何问题,在 FF 下,长串英文会被遮住超出的内容 table中td.th强制换行方法: 复制代码
一、overflow指定盒中...3.说明:对于table来说,假如table-layout属性设置为fixed,则td对象支持带有默认值为hidden的overflow属性。如果设为hidden,scroll或者auto,那么超出td尺寸的内容将被剪切。如果设为visible
//document.body.style.overflow = "hidden"; } ``` CSS 样式 在 CSS 中,我们可以使用以下代码来设置遮罩层的样式: ```css #mybg { background: #000; width: 100%; height: 100%; position: absolute; ...
页面中table宽度设置width=600px之后,宽度仍然不是固定的,文字太长后不换行,把table都撑变形了。 解决办法: 1.table 设置 宽度,绝对宽度和相对都可以 ...复制代码代码如下: overflow:hidden; wh
效果如图 代码: 复制代码代码如下: <style>...overflow:hidden; text-overflow:ellipsis;} table {table-layout:fixed;} </style> 注意!给TD指定宽度(否则宽度自动分配,达不到理想的效果).
overflow:hidden; position: static; height: 16px; border-collapse: separate; color: #00FF00; font-size: x-large; font-weight: 700; font-family: 宋体-方正超大字符集; border-left-color: #ACA899;...