关于div中数值太长,超出的处理方式总结
2018-02-28 17:44
281 查看
div中的数字长度过长,溢出了div的长度,总结两种解决方案
1.2)设置div的属性width:100px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;
前两种基本能解决,这种方式不做要求.
1.设置div属性
1.1)设置title属性,可以鼠标悬浮展示数据1.2)设置div的属性width:100px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>div溢出</title> </head> <body> <div title="11111111111111111111111" style="border:1px solid red;width:100px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;"> 11111111111111111111111 </div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div { width:100px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; } div:hover { width:auto; } </style> </head> <body> <div>11111111111111111111111111</div> </body> </html>
2.随着鼠标位置变动,生成div框展示详细的数据
<script language="javascript" src="jquery-1.4.2.min.js"></script> <script> function show(obj,id) { var objDiv = $("#"+id+""); $(objDi 953a v).css("display","block"); $(objDiv).css("left", event.clientX); $(objDiv).css("top", event.clientY + 10); } function hide(obj,id) { var objDiv = $("#"+id+""); $(objDiv).css("display", "none"); } </script> <!--http://www.ablanxue.com/prone_3421_1.html--> <div id="mydiv1" style="position:absolute;display:none;border:1px solid silver;background:silver;"> 提示1效果 </div> <div id="mydiv2" style="position:absolute;display:none;border:1px solid silver;background:silver;"> 提示2效果 </div>
前两种基本能解决,这种方式不做要求.
相关文章推荐
- 总结群里讨论的关于浮点数,如何四舍五入保留两位小数的处理方式
- 【编程题目】数值的整数次方——关于代码完整性及错误处理方式的探讨(C++实现)
- 关于服务器集群的session处理方式的总结
- 关于项目中异常处理的一些总结
- 关于处理GET方式提交的含有特殊字符的参数jsp
- DIV中字数太多破坏原本设定大小的处理方式【overflow】
- yii2关于HTTP请求处理的总结
- 关于CSS中的float和position (父容器div内的子元素div为float时,父元素无法撑开(或高度自适应)的解决方式)
- 图像处理中关于孔洞填充的方法总结
- 关于销售订单挑库发放卡接口以及发运处理卡接口的处理方式
- 关于CAD各个版本使用编码方式的总结:
- lua关于表的处理和输出方式整理
- 关于海量数据处理分析的经验总结
- 【基于WPF+OneNote+Oracle的中文图片识别系统阶段总结】之篇四:关于OneNote入库处理以及审核
- 关于两种错误处理方式(返回值,异常)的浅显认识
- 关于struts2传值方式的一些学习总结
- 关于sscanf()处理字符串的总结
- 关于以ODBC和ADO方式访问excel数据库总结
- 关于“error at ::0 can't find referenced pointcut”错误的处理方式
- 关于子视图超出父视图后无法响应点击事件的处理办法