使用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. PHP 转化 Excel导入时间

    $fixation = 25569; $fixationT = 24 * 60 * 60; $date = gmdate('Y-m-d H:i:s', ('excel导入的时间'- $fixation ...

  2. Git 合并多次提交

    在合并分支的时候,希望将多次提交合并成一个,然后再 cherry-pick 到主分支. 合并分支 develop 分支做开发,可能会进行多次提交,但是在发布或者进行 PR 的时候,我们只希望看到一次提 ...

  3. C++装饰器模式

    UML图: #include <iostream> #include <string> #include <windows.h> using namespace s ...

  4. 流程控制-物流费用计算(嵌套if)

    题目描述 快递公司规定,如果物品体积超过2.5立方米,不允许快递.如果重量超过40kg,不允许快递.快递收费价格为: 小于等于1kg,一口价10块钱: 大于1kg,小于等于5kg,10块钱的基础上,每 ...

  5. Python语言的configparser模块便捷的读取配置文件内容

    配置文件是在写脚本过程中经常会用到的,所以读取配置文件的模块configparser也非常重要,但是很简单. 首先我们的配置文件内容为: 这样的配置文件,[]里面的内容叫section,[]下面的内容 ...

  6. JavaScript(1)---绑定事件、解除绑定事件

    JavaScript(1)---绑定事件.解除绑定事件 一.事件概述 1.事件的几个概念 · 事件 指的是文档或者浏览器窗口中发生的一些特定交互瞬间.我们可以通过侦听器(或者处理程序)来预定事件,以便 ...

  7. 8.for循环及练习

    For循环:   虽然所有循环结构都可以用 while 或者 do...while 表示,但Java提供了另一种语句— —for循环,使一些循环结构变的更加简单. for 循环语句是支持迭代的一种通用 ...

  8. .net mvc Bundle 自己配置

    遇到了个坑 来和大家分享一下 1.一个空的mvc项目需要引用 System.Web.Optimization 2.然后nuget添加 microsoft ASP.NET WEB OPTIMIZATIO ...

  9. Beat our dice game and get the flag 击败我们的骰子游戏拿到旗子

    文件名:ebCTF-Teaser-BIN100-Dice.exe 话不多说 用PEID一看没壳 拖进OD 让我们摇出31337这五个数字才能拿到正确的flag cmp dword ptr ss:[eb ...

  10. RocketMQ 实战之快速入门

    原文地址:https://www.jianshu.com/p/824066d70da8 最近 RocketMQ 刚刚上生产环境,闲暇之时在这里做一些分享,主要目的是让初学者能快速上手RocketMQ. ...