html中使用js实现内容过长时部分
有时数据内容太长时我们并不希望其全部显示出来，因为这样可能会导致用于显示这些内容的标签被撑开影响美观。
这时就希望能够实现默认只显示部分内容，在鼠标放上去的时候再将全部的内容显示出来。
这里提供一个简单的实现方法，通过将全部内容放在单独一个标签中，通过控制这个标签的显示与隐藏实现此效果。
html页面中创建一个table，用于存放默认的数据，在需要显示更多数据的td中新建一个div用于显示所有数据（可以放在任何期望的位置）。
这里通过样式控制此div的显示与隐藏。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>过长内容隐藏</title>
<style type="text/css">
td{
width:200px;
border:1px solid #000;
}
.fullData{
display:none;
}
#userDesp:hover .fullData{
position:absolute;
display:block;
cursor:hand;
word-break: break-all;
width:200px;
background-color: rgba(0,0,0,0.5);
color:#fff
}
</style>
</head>
<body>
<table>
<tr>
<td>用户名</td>
<td>简介</td>
</tr>
<tr>
<td>userName</td>
<td id="userDesp">
鼠标置于此查看详情
<div class="fullData">
这时用户简介，比较长，所以把其他内容给隐藏了，鼠标放上来就能看见了哦。
</div>
</td>
</tr>
</table>
</body>
</html>
如果需要js控制显示与隐藏，可以使用onmouseover和onmouseout这两个事件。
给td中添加这两个事件，
<td onmouseover="showDetails(this)" onmouseout="closeDetails(this)">
鼠标置于此查看详情
<div style="display:none">
这时用户简介，比较长，所以把其他内容给隐藏了，鼠标放上来就能看见了哦。
</div>
</td>
然后在js部分写上需要控制的div的样式。
<script type="text/javascript">
function showDetails(o){
o.getElementsByTagName("div").item(0).style.cssText = "position:absolute; display:block;cursor:hand; word-break: break-all;width:200px;background-color: rgba(0,0,0,0.5);color:#fff";
} function closeDetails(o){
o.getElementsByTagName("div").item(0).style.cssText = "display:none";
}
</script>
这样就可以实现简单的隐藏与显示了。
html中使用js实现内容过长时部分的更多相关文章
- 解决element-ui表格表头内容太长时的换行问题
在用vue+element-ui做一个后台管理系统时,遇到这样的问题, 如图: 使用el-table做一个表格,当表头内容过长时会换行,在不设置的宽度的时候每一列的宽度是等比例分配的,虽然elemen ...
- js打印窗口内容并当窗口内容较长时自动分页
项目环境Angular: 方法1.window.print() HTML页面上的代码: <div id="tenementBillTable" class="dia ...
- IOS开发中设置控件内容对齐方式时容易混淆的几个属性
IOS开发中四个容易混淆的属性: 1. textAligment : 文字的水平方向的对齐方式 1> 取值 NSTextAlignmentLeft = 0, // 左对齐 NST ...
- CSS，bootstrap表格控制当td内容过长时用省略号表示，以及在不使用bootstrap时过长也用省略号表示
首先需要在table中设置table-layout:fixed; <table style="table-layout:fixed"></table> 然后 ...
- 电力项目七--js控制文字内容过长的显示和文本字数的显示
当文本框中文字内容过长时,需要调整显示的样式 如上图所示的样式 对应的代码为: <div id="showInfomation" style="visibility ...
- [Web 前端] td长度固定，内容过长，超过部分用省略号代替
cp from : https://blog.csdn.net/bsh_csn/article/details/51829103 html的table表格中td长度固定,当内容过长时,超过部分用省略号 ...
- Echarts X轴内容过长自动隐藏,鼠标移动上去显示全部名称方法
最近公司做项目,使用echarts做开发,碰到一些数据的名称很长导致图例展示的效果不是很好,自己写了一个方法,当X轴内容过长时自动隐藏,鼠标移动上去显示全部名称 样例: 图二是鼠标移动到名称显示的,怎 ...
- Firebug中调试中的js脚本中中文内容显示为乱码
Firebug中调试中的js脚本中中文内容显示为乱码 设置 页面 UFT-8 编码没用, 解决方法:点击 "Firebug"工具栏 中的"选项"---" ...
- JavaScript解决select下拉框中的内容太长显示不全的问题
JavaScript解决select下拉框中的内容太长显示不全的问题 1.说明 有些情况下,select下拉框的内容过长,导致部分看不见: 现在通过鼠标事件,让下拉框中的内容显示完全 2.实现源码 & ...
随机推荐
- laravel中日志为daily时如何设置最大保存天数
在laravel中,日志设置为daily时,默认保存七天的日志,超过则清除七天前的日志.可修改默认的设置,假如要保存30天的日志,则配置如下: 在配置文件config/app.php中添加如下代码: ...
- 模拟器报Installation error: INSTALL_FAILED_CONTAINER_ERROR解决方法
今天刚刚导入了一个项目,但是多次导入,始终有错误,解决不了.第一次是我导入项目之后,项目前边有红色叉号,但是项目里面却没有错误标志.重新打开Eclipse,方解决了这个问题.但是,在模拟器上运行,却始 ...
- （待续）C#语言中的动态数组（ArrayList）模拟常用页面置换算法（FIFO、LRU、Optimal）
目录 00 简介 01 算法概述 02 公用方法与变量解释 03 先进先出置换算法(FIFO) 04 最近最久未使用(LRU)算法 05 最佳置换算法(OPT) 00 简介 页面置换算法主要是记录内存 ...
- web测试方法总结
链接地址:http://www.cnblogs.com/Jessy/p/3539638.html 一.输入框 1.字符型输入框: (1)字符型输入框:英文全角.英文半角.数字.空或者空格.特殊字符“~ ...
- oracle创建用户并导入dmp文件
SQL命令行执行以下命令:SQL> conn sys/111111 as sysdba; SQL> CREATE USER TEST11 IDENTIFIED BY "11111 ...
- Python中的threading
Python中的threading RLock--重入锁 RLock在Python中的实现是对Lock的封装,具体在类中维护了一个重入次数的变量.一旦一个线程获得一个RLock,该线程再次要求获得该锁 ...
- Nodejs 高并发长链接TCP链接的服务器设计问题
最近有个项目比较棘手,nodejs的tcp服务,目前的服务器支持3W左右的客户端连接,但是客户希望能够支持30W左右,原先的模型是让客户端请求一个地址分发服务器,然后再tcp链接到不同的地址上实现高并 ...
- 如果因特网中的所有链路都提供可靠的交付服务，TCP可靠传输服务是多余的吗？
IP协议因为是无连接的, 所以其传输是不可靠的.虽然链路保证了数据包在端到端的传输中不发生差错,但是它不能保证IP数据包是按照正确的书需到达最终的目的地.IP数据包可以使用不同的路由通过网络,到达接收 ...
- poj3728
[描述] 有 N 城 市在一个国家,有一个且只有一个简单的路径每一对城市之间. 一个商人选择了一些路径和想赚尽可能多的钱在每个路径. 当他沿着一条路径,可以选择一个城市购买一些商品和出售他们在一个城市 ...
- 16位汇编 多文件 intel汇编 编译器masm5.0 调用子程序库即静态库的自定义函数 WINDOWS
;以下是16位汇编 创建静态库,并调用静态库中的函数 ;多文件汇编格式 ;编译方法(此处用的是masm 5.0,如果是其他的编译器,有可能不能编译) ;第一种,编译方法 ;1.masm main.as ...