使用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>
使用html及CSS实现在table中文字信息超过5个隐藏，鼠标移到时弹窗显示全部：的更多相关文章
- 使用VUE实现在table中文字信息超过5个隐藏，鼠标移到时弹窗显示全部
使用VUE实现在table中文字信息超过5个隐藏,鼠标移到时弹窗显示全部 <template> <div> <table> <tr v-for="i ...
- table 中 文字长度大于td宽度，导致文字换行 解决方案
1.TD不换行 nowrap属性 表格table的td单元格中,文字长了往往会撑开单元格,但是如果table都不够宽了,就换行了好像(不要较真其他情况,我只说会换行的情况).换行后的表格显得乱糟糟,不 ...
- vue2.0实现在table中实现全选和反选
其实在去年小颖已经写过一篇:Vue.js实现checkbox的全选和反选 小颖今天在跟着慕课网学习vue的过程中,顺便试试如何在table中实现全选和反选,页面的css样式是直接参考慕课网的样式写的, ...
- 在input中实现点点点与当鼠标移上去时显示剩余的字
项目中经常会遇到这个问题,在一个内容框中,由于框的宽度是固定的,但是里面的内容却有很多,那么这个时候需求里就要求第一,多余的字要以点点点的形式隐藏,第二,当鼠标移上去的时候要以title提示的方式显示 ...
- css 一行或多行文字溢出以...的形式隐藏
一行文字溢出以...形式隐藏 我需要隐藏... css代码如下: white-space:nowrap; text-overflow:ellipsis; overflow:hidden; 多行文字溢出 ...
- CSS 文本和表格中文字溢出显示省略号
CSS控制文本超出指定宽度后用省略号代替,CSS控制文本不换行. 一般的文字截断(适用于内联与块): .text-overflow { display:block;/*内联对象需加*/ ...
- table中文字过长使用省略号
1.设置table固定布局,否则自适应布局会不受控制 table{ table-layout: fixed; } 2.设定td宽度占比 <table> <col width=&quo ...
- iview的table中Tooltip的使用
这篇文章主要介绍了iview-admin中在table中使用Tooltip提示效果. 1. table中文字溢出隐藏,提示气泡展示所有信息 jLongText(item){ item.render = ...
- 嵌入式qt显示中文和隐藏鼠标
最近项目快接近尾声了,要把项目移植到板子上,但是板子上的系统没有安装字库,导致中文无法显示,并且有一个很讨厌的鼠标光标(又没有鼠标),上网找了一些解决方案,记录一下 qt显示中文: 如果你急于在ARM ...
随机推荐
- RHEL6.6安装Oracle 11g RAC - 基于VMware的实验环境
实验环境准备虚拟机:VMware® Workstation 14 Pro操作系统:Red Hat Enterprise Linux 6.6 x86_64rhel-server-6.6-x86_64-d ...
- Redis-CAP定理和BASE理论（二）
CAP理论概述 1998 年来自柏克莱加州大学的计算机科学家 埃里克.布鲁尔(Eric Brewer) 提出分布式系统的三个基本指标:Consistency(一致性).Availability(可用性 ...
- spring get方法 中文(UTF-8)乱码
问题: 前端用Get方法进行如下请求: 在浏览器中输入:http://localhost:8080/dmaList/ExportBySQL?sql=&names=分区级别&size=1 ...
- 【转】8 个效果惊人的 WebGL/JavaScript 演示
英文原文:9 IMPRESSIVE WEBGL JAVASCRIPT EFFECT SHOWCASE,翻译:iteye WebGL 是一种 3D 绘图标准,这种绘图技术标准允许把 JavaScript ...
- 基于redis有序集合，实现简单的延时任务
基于redis有序集合,实现简单的延时任务 延时任务的场景很多,开发过程中我们经常会遇到,比如说: 1.订单未付款,5分钟后自动取消,这是电商网站非常普遍的需求: 2.用户创建订单不付款,3分钟后自动 ...
- 【DPDK】【CPU usage】DPDK应用如何计算当前系统的压力
[前言] 使用DPDK开发的朋友应该都了解使用dpdk的fwd线程的工作模式是polling模式,即100%轮询的方式去加速网络IO,这样我们在操作系统层面上来观察目标processer会发现usag ...
- Python中with标签的使用详解
1.在python DTL模板中,想要定义变量,可以通过"with"语句来实现. 2."with"语句有两种使用方式: 第一种是"with xx=xx ...
- Java中的SPI扩展机制（有demo）
参考连接:https://www.jianshu.com/p/3a3edbcd8f24 一.什么是SPI SPI ,全称为 Service Provider Interface,是一种服务发现机制.它 ...
- 暑假提高组集训Day1 T1
说实话,今天的题真的有点难! ~备受打击~ 我们先来看一看第一题吧 看起来好像不太简单,其实并不难 下面来提供两种方法吧 1.做法一 //签到题 /* 那么这一题就是告诉你n个点的坐标,把它们分别放到 ...
- 256位AES加密和解密
/// <summary> /// 256位AES加密 /// </summary> /// <param name="toEncrypt">& ...