最近很忙，很久没发技术贴了，发一个最近解决的小问题，比较有趣，特此分享
今天hd在mail出了一个题目，解决单元格内容随着内容变化，效果类似如下：
这是我已经实现后的效果，看到这个题目后，第一感觉就是不需要js，css应该就可以完成，仔细翻看了一下css手册，发现确实可以，代码如下：
<style>
.tbl {
table-layout:fixed;
border-top: 5px solid #333;
border-collapse: collapse;
background: #fff;
}
.tbl td {
border-bottom: 1px dashed #333;
padding: 2px 5px;
text-overflow:ellipsis;
overflow:hidden;
white-space:nowrap;
}
</style>
|
表格代码如下：
<TABLE border="1" width="80%" class="tbl">
<TR>
<TD width="50">标题</TD>
<TD>正文中文正文中文正文中文正文中文正文中文正文中文正文中文正文中文正文中文正文中文</TD>
<TD width="50">日期</TD>
</TR>
<TR>
<TD>标题</TD>
<TD>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</TD>
<TD>日期</TD>
</TR>
</TABLE>
|
中文，英文，IE，FF都ok。
重点就是
text-overflow:ellipsis;
overflow:hidden;
white-space:nowrap;
|
这几个css属性，摘抄说明如下：
设置或检索是否使用一个省略标记(...)标示对象内文本的溢出。
这个属性仅仅作用于水平内联方向的，普通的西方文本的溢出。内联溢出发生在行内的文本超出可用宽度却没有换行机会的时候。
要强制溢出发生并且应用 ellipsis 值，作者必须设置对象的 white-space 属性值为 nowrap 。
假如没有换行机会(例如，对象容器的宽度是狭窄的，而内有很长的没有合理断行的文本)，没有应用 nowrap 也有可能溢出。
为了使 ellipsis 值被应用，此属性必须被设置到具有不可视区域的对象。最好的选择是设置 overflow 属性为 hidden 。设置 overflow 属性为 scroll 或者 auto 时，此属性也会应用。但是会有滚动条出现。
通过选择省略标记，隐藏的文本可以被选择。当选择发生时，省略标记会隐藏而被文本替换。
此属性为在DHTML中制作省略标记提供了高效的方法。
此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。
对应的脚本特性为 textOverflow 。
|
|
|
 |
|
Trackback: http://tb.donews.net/TrackBack.aspx?PostId=556055