使用html及CSS实现在table中文字信息超过5个隐藏，鼠标移到时弹窗显示全部：
使用html及CSS实现在table中文字信息超过5个隐藏，鼠标移到时弹窗显示全部：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>li9.club</title>
<style type="text/css">
a.popup{
display: inline-block;
width:90px;
word-break: keep-all;
overflow: hidden;
text-overflow: ellipsis;
}
a.popup div{
display:none;
background-color:#F1867C;
position:absolute;
border: 1px solid;
padding:4px;
}
a.popup:hover div{display:block;}
table {
width: 100%;
float: left;
table-layout:fixed;
width:500px;
border:1px solid #ccc;
border-collapse:collapse;
}
table tr {
line-height: 25px;
border:1px solid #ccc;
}
table th,td {
border:1px solid #ccc;
text-align:center;
}
</style>
</head>
<body>
<div>
<table>
<tr>
<th>姓名</th>
<th>个性签名</th>
<th>性别</th>
<th>beizhu</th>
</tr>
<tr>
<td>张san
</td>
<td>
<a class="popup">我就是我发发发发发发发发发发发发发发发 </a>
</td>
<td>
<a class="popup">是的师傅师傅说的ddddddddddddddddddddddddddddddddddddddddddd字
<div>是的师傅师傅说的ddddddddddddddddddddddddddddddddddddddddddd字</div>
</a>
</td>
<td>
<a class="popup">悬发生的发生地方斯蒂芬森对方的身份ddddddddddddddddddddddddddddddddddddddddddd字
<div>悬发生的发生地方斯蒂芬森对方的身份ddddddddddddddddddddddddddddddddddddddddddd字 </div>
</a>
</td>
</tr>
</table>
</div>
</body>
<script>
</script>
</html>
最新文章
- 4、ASP.NET MVC入门到精通——NHibernate构建一个ASP.NET MVC应用程序
- (转)C#为什么要使用Invoke,它和BeginInvoke有什么区别
- OSX下Python模块安装常见问题解决
- win7双系统安装ubuntu并配置常用软件
- fenghuangscannerV3 EXE版本
- 【CodeVS 1004】四子连棋
- 结合源码看nginx-1.4.0之nginx多进程机制详解
- [Hive优化] 之 MapJoin
- 恒天云技术分享系列5 – 虚拟化平台性能对比（KVM & VMware）
- 什么是PRD、MRD与BRD
- 2017 google Round D APAC Test 题解
- Xamarin.Forms WebView
- 手把手教你安装QT集成开发环境（操作系统为ubuntu10.04）
- phpcms基础
- Angularjs快速入门（四）-css类和样式
- Spring Cache For Redis
- ListView添加item的事件监听
- 微信小程序开发问题汇总
- Oracle单机Rman笔记[6]---记一次oracle脱机异地还原
- c#实现识别图片上的验证码数字