表格里使用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 交通频道 作文范文 青海,玉树!作文250字 夜风下浪花的声音 读《我爱我的祖国》有感 不要去羡慕别人的幸福 员工每周自我鉴定表 英汉互译经典语录20条精选_值得收藏 我的天使,你在何方 爱情表白句子大全集 山中送从叔简赴举 梦就是努力的方向作文600字 你的窗口能看到多远 小学六年级作文600字:可怜的小男孩 2016年机关党委区直机关党的工作会议发言稿 舟行漓江作文100字 我的家乡变了作文 在寒冬里 踏莎行·柳絮风轻 停车场买卖合同书 小小捉虾,大大乐趣——我的课外生活 当爱走到了不了了之 捉迷藏作文:稻草堆捉迷藏 初中初二作文800字:喜羊羊与灰太狼之五行铠甲4 阿诺德·施瓦辛格:“不可能”这句话没意义 2016年学校计划生育工作计划 忧伤划开宁静的夜空 尊严的感受作文400字 年终物价局工作总结 2015央视开学第一课”英雄不朽“观看心得体会 子夜·月愁 制作移动动画 包法利夫人读后感 小学生优秀作文_春节趣事 清秋浅抒 用爱搭建教育的蓝天 枫叶·思念作文700字 小学五年级作文500字:小狗喵喵 有关春节初三作文:隆重而温馨的春节 踏马归来,为你而来 家乡的竹园作文550字 七夕情人节手机短信祝福语 春天没有错过 侵权法的任务 村庄,我们的爱与疼痛 别丢下童话1200字 巧对戒酒 台风,台风 丹阳作(一作陈存诗) 美了美了 有宠物真好 你要的爱 我给不起

Copyright © 2016 phpStudy |