使用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>

使用html及CSS实现在table中文字信息超过5个隐藏，鼠标移到时弹窗显示全部：的更多相关文章

  1. 使用VUE实现在table中文字信息超过5个隐藏，鼠标移到时弹窗显示全部

    使用VUE实现在table中文字信息超过5个隐藏,鼠标移到时弹窗显示全部 <template> <div> <table> <tr v-for="i ...

  2. table 中 文字长度大于td宽度，导致文字换行 解决方案

    1.TD不换行 nowrap属性 表格table的td单元格中,文字长了往往会撑开单元格,但是如果table都不够宽了,就换行了好像(不要较真其他情况,我只说会换行的情况).换行后的表格显得乱糟糟,不 ...

  3. vue2.0实现在table中实现全选和反选

    其实在去年小颖已经写过一篇:Vue.js实现checkbox的全选和反选 小颖今天在跟着慕课网学习vue的过程中,顺便试试如何在table中实现全选和反选,页面的css样式是直接参考慕课网的样式写的, ...

  4. 在input中实现点点点与当鼠标移上去时显示剩余的字

    项目中经常会遇到这个问题,在一个内容框中,由于框的宽度是固定的,但是里面的内容却有很多,那么这个时候需求里就要求第一,多余的字要以点点点的形式隐藏,第二,当鼠标移上去的时候要以title提示的方式显示 ...

  5. css 一行或多行文字溢出以...的形式隐藏

    一行文字溢出以...形式隐藏 我需要隐藏... css代码如下: white-space:nowrap; text-overflow:ellipsis; overflow:hidden; 多行文字溢出 ...

  6. CSS 文本和表格中文字溢出显示省略号

    CSS控制文本超出指定宽度后用省略号代替,CSS控制文本不换行. 一般的文字截断(适用于内联与块): .text-overflow {     display:block;/*内联对象需加*/     ...

  7. table中文字过长使用省略号

    1.设置table固定布局,否则自适应布局会不受控制 table{ table-layout: fixed; } 2.设定td宽度占比 <table> <col width=&quo ...

  8. iview的table中Tooltip的使用

    这篇文章主要介绍了iview-admin中在table中使用Tooltip提示效果. 1. table中文字溢出隐藏,提示气泡展示所有信息 jLongText(item){ item.render = ...

  9. 嵌入式qt显示中文和隐藏鼠标

    最近项目快接近尾声了,要把项目移植到板子上,但是板子上的系统没有安装字库,导致中文无法显示,并且有一个很讨厌的鼠标光标(又没有鼠标),上网找了一些解决方案,记录一下 qt显示中文: 如果你急于在ARM ...

随机推荐

  1. 学了java，我才发现台球还可以这样玩！

    桌球小游戏的尝试 桌球是人们日常生活中都能接触到的一种娱乐活动,随着互联网技术的发展,手机上也有了很多桌球小游戏,让人们随时随地都能打两把.   今天分享一个用java编写的桌球小游戏 代码如下:  ...

  2. 1061 判断题 (15 分)C语言

    判断题的评判很简单,本题就要求你写个简单的程序帮助老师判题并统计学生们判断题的得分. 输入格式: 输入在第一行给出两个不超过 100 的正整数 N 和 M,分别是学生人数和判断题数量.第二行给出 M ...

  3. Redis实战 | 持久化、主从复制特性和故障处理思路

    前言 前面两篇我们了解了Redis的安装.Redis最常用的5种数据类型.本篇总结下Redis的持久化.主从复制特性,以及Redis服务挂了之后的一些处理思路. 前期回顾传送门: Linux下安装Re ...

  4. 解决RabbitMQ远程不能访问的问题

    刚刚安装的RabbitMQ-Server-3.3.5,并且也已经开启了Web管理功能,但是现在存在一个问题: 出于安全的考虑,guest这个默认的用户只能通过http://localhost:1567 ...

  5. Yolo V3理解bbox和label的关系

    假如一个bbox坐标为:[35 220 62 293 3] 第一步:将bbox转换为中心坐标和宽高形式(3种缩放比例进行缩放) 那么onehot:[0 0 0 1 0 0 0 0 0 0 ...... ...

  6. ubuntu频繁死机--独立显卡问题

    问题:笔记本安装ubuntu时以及装好后有时会出现花屏.死机的问题,系统报错 *ERROR* UVD not responding, trying to reset the VCPU!!! *ERRO ...

  7. 微信小程序--百度地图坐标转换成腾讯地图坐标

    最近开发小程序时出现一个问题,后台程序坐标采用的时百度地图的坐标,因为小程序地图时采用的腾讯地图的坐标系,两种坐标有一定的误差,导致位置信息显示不正确.现在需要一个可以转换两种坐标的方法,经过查询发现 ...

  8. 一个按键搞定日常git操作

    Git is a free and open source distributed version control system designed to handle everything from ...

  9. Burpsuite设置拦截response

    一.Burpsuite设置拦截HTTP/HTTPS代理 1, .拦截修改request 首先进入Proxy-Options-Intercept Client Requests设置request拦截的规 ...

  10. [bzoj4827] [洛谷P3723] [Hnoi2017] 礼物

    Description 我的室友最近喜欢上了一个可爱的小女生.马上就要到她的生日了,他决定买一对情侣手 环,一个留给自己,一 个送给她.每个手环上各有 n 个装饰物,并且每个装饰物都有一定的亮度.但是 ...