表格里使用text-overflow后不能隐藏超出的文本的解决方法


在w3cschool中css3中有个文本相关的属性text-overflow,当把它设为ellipsis时文本溢出内容就能显示为省略标记,而设为clip时就能把文本溢出的部分裁切掉,当然,前提是设置好两个属性,那就是white-space:nowrap(强制文本在一行内显示)及overflow:hidden(溢出内容为隐藏),也就是要同时有

复制代码
代码如下:

{
text-overflow:ellipsis或clip;
white-space:nowrap;
overflow:hidden;
}

因为之前有用过不少次这个属性,而且用得也都很顺利,所以最近在弄一些table的时候遇到了td内的内容太多而出现换行从而影响整体的美观的问题,所以我想把文本不换行而且让超出的文本能显示为省略号,于是我就很自然的就去用了上面那三属性并且也为td设置了长度和宽度,结果神了奇,一直没把超出的文本内容给换成省略号,尝试排除了各种我觉得有可能的影响后依旧不能解决,于是我只好去google一下,后来终于找到了原因,就是要在table的样式里定义一个属性 table-layout:fixed,综上,要想解决表格里面使用text-overflow后依旧不能隐藏超出的文本的问题,就必须完整的使用下面这些属性

复制代码
代码如下:

td{
text-overflow:ellipsis或clip;
white-space:nowrap;
overflow:hidden;
width:**px;
}
table{
table-layout:fixed;
}

还有如果想鼠标移动上去时显示被隐藏的文本内容,还可以设置

复制代码
代码如下:

td:hover
{
text-overflow:inherit;
overflow:visible;
}



相关阅读:
Windows下的3个网络诊断命令介绍
基于Turn.js 实现翻书效果实例解析
使用UART与PC通信实现msp430g2553单片机超声波测距示例
AngularJS学习笔记之依赖注入详解
JavaScript实现的购物车效果可以运用在好多地方
Android4.0.x Home键事件拦截监听的方法
bootstrap3教程之bootstrap显示5列的方法
php支付宝接口用法分析
CSS教程 彻底掌握Z-index属性
php输入流php://input使用示例(php发送图片流到服务器)
Android中Activity常用功能设置小结(包括全屏、横竖屏等)
ajax调用简单实例
JavaScript控制网页平滑滚动到指定元素位置的方法
jQuery使用中可能被XSS攻击的一些危险环节提醒
快速导航
PHP MySQL HTML CSS JavaScript MSSQL AJAX .NET JSP Linux Mac ASP 服务器 SQL jQuery C# C++ java Android IOS oracle MongoDB SQLite wamp 交通频道 作文范文 我的朋友翠文200字 区城镇居民基本医疗保险工作总结 关于2007年元旦春节期间严格遵守有关纪律规定的通知 农民工权益保障论文 一路走来,风景如画作文1500字 我爱雾250字 初中初二作文350字:中秋月圆 关于端午节的诗歌朗诵的资料 尊敬老师的名人名言大全 心情日记300字 短信调侃开心过一天,好多经典短信笑话 我的童年作文1300字 描写夏天的好段 沉醉在秋天的世界里作文550字 马年春节对联之银行篇 《十万个为什么》有感450字 秋游彭园 小学五年级作文550字:“生死时速” 人一定要读懂自己 关于爱情的伤感语句 人间瑶池--黄龙 和朋友一起分享的经典短信 教师给学生的毕业赠言100句 最搞笑短信精选 蒙古回归中国,中国人的蒙古心结 工地通知 市消防安全畅通工程实施方案 小学六年级作文550字:立志读书,报效 纪律高于一切作文400字 彼岸樱花树下的等待_376字 我发现了颜色的小秘密 惜君独凭栏,灯火亦阑珊 雷锋的手——读《雷锋的故事》有感 关于初三的我们作文800字 关于除夕的作文精选:除夕趣事 感恩资助 2010,我告别了冬天 勇敢追梦_900字 2014国庆节的诗句精选 间接因果论证:小孩子为什么说谎?-WhyDoChildrenTellLies? 免费分析写作思路,鉴赏构思技巧 房地产财务年终工作总结 遗忘作文750字 提前体会婆婆心 那一年的婚期,我一无所知 聆听作文150字 恨不相逢未剃时 一棵有魔力的树 笔尖的旋转 审计局创先争优活动方案

Copyright © 2016 phpStudy |