使用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. netcore 自动生成Dockerfile的坑

    简介   之前采用shell脚本+dockerfile的方式构建项目,后来发现有Docker在17.05版本之后有多阶段构建方式,该文主要记录了netcore采用dockerfile构建遇到的坑. 原 ...

  2. 迭代器使用过程中为什么抛出ConcurrentModificationException

    出现的场景:在迭代器对集合进行遍历的同时,集合本身进行变更操作(add(), remove(), set()). 当正常调用时: import java.util.ArrayList; import ...

  3. 云资源中的低成本战斗机——竞价实例，AWS、阿里云等六家云厂商完全用户使用指南

    云端资源价格 预留实例:长期持有,批发路线,价格最便宜. 按需实例:即买即用,零售路线,价格最贵. 这两种资源,基于不同区域/价格的六家云厂商价格对比,连同原始数据文档我们已经打包成了一份电子文档,有 ...

  4. 如何应用threejs实现立方体每个面用图片替换

    var geometry = new THREE.BoxGeometry(200, 200, 200);var materialsbg = []; for (var i = 0; i < geo ...

  5. Java配置文件读取中文乱码问题

    背景 这是我之前在做的用友服务对接开发,昨天领导拿给财务测试时告诉我有乱码,当时我第一想法是用友那边的编码格式有问题,因为还在做其他任务,我说等问一下用友他们用的什么编码格式我们这边改一下,然后今天早 ...

  6. 解析Json字符串中的指定的值

    { "head": { ", "Id": "20191008144448iAQE", "Message": & ...

  7. .NET编程周记第3期-2020年1月19日

    整理了2020年1月19日这周阅读的几篇有趣的和.NET开发相关的文章.在这里和大家分享. 0x00 Introducing Nullable Reference Types in C# 如标题所示, ...

  8. CF6B President's Office 题解

    看到大致思路一致的题解,决定发一篇运用STL不用dfs的题解     好久不发题解,心里不爽 思路: 1.输入的同时找到总统桌子的位置,用vector<pair <int,int> ...

  9. Spring加载早期获取BasePackage

    public class GetBasePackage { private Class<? extends Annotation> annotation; public GetBasePa ...

  10. php变量中两种特殊类型

    第一种----资源 资源(resource):资源是由专门的函数来建立和使用的,例如打开文件.数据连接.图形画布.我们可以对资源进行操作(创建.使用和释放).任何资源,在不需要的时候应该被及时释放.如 ...