我的CSS心得(5) - 让文字自动适应Table宽度

以下的例子是用样式实现,文字自动适应Table的宽度,并且超出的宽度的文字自动隐藏。IE下面还可以自动出现...的省略符号.

所用到的样式:
.ctl{
   table-layout:fixed
}
  .ctl td{text-overflow:ellipsis;overflow:hidden;white-space: nowrap;padding:2px}


关键样式:
table-layout:fixed 固定布局的算法,则表格被呈递的默认宽度为 100% (For IE,Mozilla)
text-overflow:ellipsis 当对象内文本溢出时显示省略标记(...) (For IE)
overflow:hidden 不显示超过对象尺寸的内容 (For IE,Mozilla)
white-space: nowrap 强制在同一行内显示所有文本,直到文本结束或者遭遇 br 对象 (For IE,Mozilla)

演示:
HTML代码


[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]


[本日志由 puterjam 于 2006-04-15 06:36 PM 编辑]
上一篇: 首届 PJBlog2 Skin 设计大赛比赛结果公布
下一篇: showModalDialog 无法跨域使用
文章来自: 本站原创
引用通告: 查看所有引用 | 我要引用此文章
Tags: css
相关日志:
评论: 6 | 引用: 7 | 查看次数: 23736
jackery[2007-02-10 08:06 AM | | | 211.143.58.36 | del | 回复回复]
恩,不错!正需要呢!
MMMMN[2006-05-01 11:17 PM | | | 219.132.10.159 | del | 回复回复]
GOOG
okss[2006-04-30 03:46 AM | | | 218.83.151.165 | del | 回复回复]
五个字!"太帅了"~~~~~~~~~~~~~~
晓武[2006-04-18 10:54 PM | | | 218.17.84.117 | del | 回复回复]
支持一个 谢谢
NINSTEIN[2006-04-16 09:32 AM | | | 60.190.244.242 | del | 回复回复]
实用 可为站子提高小许效率
按下快乐键[2006-04-16 00:39 AM | | | 61.54.81.61 | del | 回复回复]
把代码放到哪个文件里面?
能使用在"最新日志"侧边栏里面吗?让日志标题只占一行,多余的就用...代替
发表评论
昵 称:
密 码: 游客发言不需要密码.
邮 箱: 邮件地址支持Gravatar头像,邮箱地址不会公开.
网 址: 输入网址便于回访.
内 容:
验证码:
选 项:
虽然发表评论不用注册,但是为了保护您的发言权,建议您注册帐号.
字数限制 500 字 | UBB代码 开启 | [img]标签 关闭