0

0

table 里的td内容过长,我想用。。。显示_html/css_WEB-ITnose

php中文网

php中文网

发布时间:2016-06-24 12:19:55

|

1246人浏览过

|

来源于php中文网

原创

table 里的td内容过长,我想用.....显示, 重点:我想鼠标点.....上面,然后上面出现一个图层来显示整个内容,各位大哥大姐,求助啊!!!!!!!!!!!!


回复讨论(解决方案)

道理说起没用,最好给个例子,  写上注释,谢了!!!!!!!!!!!

我倒是有一个思路,用二级弹出菜单的方法

无标题文档
标题一 标题二
内容一内容……
  • 隐藏内容一
内容二内……
内容三 内容四

我倒是有一个思路,用二级弹出菜单的方法


XML/HTML code?



1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253

nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Transit……


你这个不行,我的意思是 如果内容过长就显示.....,然后把鼠标移动.....上面就出现图层显示整个内容,如果内容不长,就不会出现....,鼠标移动上面内容上面也不会出现图层来显示

我倒是有一个思路,用二级弹出菜单的方法


XML/HTML code?



1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253

nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Transit……
难点就是判断,不长的内容(也不会显示....)移动上面不会出现图层

引用 2 楼 kxteb0cc 的回复:我倒是有一个思路,用二级弹出菜单的方法


XML/HTML code?



1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253

nbsp;html PUBL……
呃,懂你意思了,你是想让它自动判断内容是否过长然后自动隐藏嘛,这个我就不晓得了,不过估计得用到javascript……

引用 4 楼 quanlei1507053 的回复:
引用 2 楼 kxteb0cc 的回复:我倒是有一个思路,用二级弹出菜单的方法


XML/HTML code?



1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253

汗。。。。。不过还是谢谢你

试一试css属性
text-overflow:ellipsis;

最好写段js搞定她~~~

display:block;/*定义为块级*/
overflow:hidden; /*超出的部分隐藏起来。*/
white-space:nowrap;/*不显示的地方用省略号...代替*/
text-overflow:ellipsis;/* 支持 IE */
-o-text-overflow: ellipsis;    /* 支持 Opera *
这只是 让多余的 内容再 一定的宽度范围内 显示省略号,但是连续的英文字母跟数字不行。
再你说的第二个问题就是 鼠标放上去显示完整的内容这个 用title吧。如果还有不懂的可以给我发私信 我做个 demo 给你 

如果能帮助你 解决问题 记得 结贴 谢谢 赚点积分真不容易啊 。

撸主,解决了么?
求分享代码啊

这种能实现隐藏,并且后面有...显示,但是问题是怎么把鼠标移到上面去在鼠标右下方显示那些内容呢

我不换行我不换行我不换行我不换行我不换行我不换行我不换行我不换行我不换行我不换行我不换行我不换行我不换行我不换行我不换行 我不换行我不换行我不换行我不换行我不换行我不换行我不换行我不换行我不换行我不换行我不换行我不换行我不换行我不换行我不换行
我不换行我不换行我不换行我不换行我不换行我不换行我不换行我不换行我不换行我不换行 我不换行我不换行我不换行我不换行我不换行我不换行我不换行我不换行我不换行我不换行
现在可以实现鼠标移上去在右下方显示了,例子为第一个和第二个单元格,希望对你和后面一样问题的人又帮助。

关于......现在可以通过CSS来实现了,text-overflow:ellipsis;
另外显示整个内容可以使用 title 属性。比如:

内容

这个很简单的,我给个思路吧,不过我是用js实现,其实用个问号表达式就可以了,当你没有td里面的值需要显示多少个字符,然后多的字符就用...表示,打比方你需要每个td里面过了6个字符然后其它的用...表示,(value.length>6?value.subString(0,6):value),然后你鼠标移上去用显示一个图层,然后图层上显示你需要的东西,你可以把图层里面需要的东西,用一个隐藏的图层标签保存,要显示的时候在一个鼠标移入事件中直接显示这个图层就可以了,如果是每个td都需要的话,那么你将在每个td中用一个span标签里面存放各个td的实际值都将隐藏起来,当你鼠标移入的时候事件激发之后你直接获取对应td里面的隐藏span标签里面值赋给要显示的图层里面,然后将图层显示出来就可以完成你要的功能了,你试试看,这样应该能解决你说的情况,如果有跟好的方法可以贴出来。

问号表达式掉了几个...((value.length>6?(value.subString(0,6)+"..."):value))

问号表达式掉了几个...((value.length>6?(value.subString(0,6)+"..."):value))

这叫三元表达式 好么



这叫三元表达式 好么

叫法不一样而已,邓小平说过黑猫白猫能抓住老鼠就是好猫,你说呢

table强制不换行:
table{table-layout:fixed;} td{overflow: hidden; text-overflow: ellipsis;word-break: keep-all;white-space:nowrap;} 
这样,虽然显示出了省略号,但是td中省略掉的内容是实际存在的,你可以用一些jQuery tip插件来显示出来,也可以自己写js

帅哥,咋就没有看到给点分呢,意思下也行啊

相关专题

更多
云朵浏览器入口合集
云朵浏览器入口合集

本专题整合了云朵浏览器入口合集,阅读专题下面的文章了解更多详细地址。

20

2026.01.20

Java JVM 原理与性能调优实战
Java JVM 原理与性能调优实战

本专题系统讲解 Java 虚拟机(JVM)的核心工作原理与性能调优方法,包括 JVM 内存结构、对象创建与回收流程、垃圾回收器(Serial、CMS、G1、ZGC)对比分析、常见内存泄漏与性能瓶颈排查,以及 JVM 参数调优与监控工具(jstat、jmap、jvisualvm)的实战使用。通过真实案例,帮助学习者掌握 Java 应用在生产环境中的性能分析与优化能力。

29

2026.01.20

PS使用蒙版相关教程
PS使用蒙版相关教程

本专题整合了ps使用蒙版相关教程,阅读专题下面的文章了解更多详细内容。

162

2026.01.19

java用途介绍
java用途介绍

本专题整合了java用途功能相关介绍,阅读专题下面的文章了解更多详细内容。

120

2026.01.19

java输出数组相关教程
java输出数组相关教程

本专题整合了java输出数组相关教程,阅读专题下面的文章了解更多详细内容。

41

2026.01.19

java接口相关教程
java接口相关教程

本专题整合了java接口相关内容,阅读专题下面的文章了解更多详细内容。

10

2026.01.19

xml格式相关教程
xml格式相关教程

本专题整合了xml格式相关教程汇总,阅读专题下面的文章了解更多详细内容。

14

2026.01.19

PHP WebSocket 实时通信开发
PHP WebSocket 实时通信开发

本专题系统讲解 PHP 在实时通信与长连接场景中的应用实践,涵盖 WebSocket 协议原理、服务端连接管理、消息推送机制、心跳检测、断线重连以及与前端的实时交互实现。通过聊天系统、实时通知等案例,帮助开发者掌握 使用 PHP 构建实时通信与推送服务的完整开发流程,适用于即时消息与高互动性应用场景。

23

2026.01.19

微信聊天记录删除恢复导出教程汇总
微信聊天记录删除恢复导出教程汇总

本专题整合了微信聊天记录相关教程大全,阅读专题下面的文章了解更多详细内容。

172

2026.01.18

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
国外Web开发全栈课程全集
国外Web开发全栈课程全集

共12课时 | 1.0万人学习

550W粉丝大佬手把手从零学JavaScript
550W粉丝大佬手把手从零学JavaScript

共1课时 | 0.2万人学习

前端进阶之JavaScript设计模式
前端进阶之JavaScript设计模式

共22课时 | 1.9万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号