前端实战——完美解决文本框超出内容用“……”表示,鼠标滑过时显示隐藏内容
来源:互联网 发布:淘宝网站结构图 编辑:程序博客网 时间:2024/06/13 03:45
在前台的开发过程中我们通常会遇到这样的问题。内容太多,显示不全,若要全部显示出来的话,又觉得太挤得慌。怎么办?
如下图所示(让用户看了就会感觉很不爽!)
那么这个时候需求就有了:
1、要求在你内容在超出文本框的时候,需要用省略替代。
2、还能够使得页面的元素自动适应页面的大小进行变化调整。
(再来一个高级一点的需求。)
3、在你的鼠标滑过的时候,将内容放到一个tooltip中显示出来,鼠标离开文本框提示框就自动消失掉。
要求的效果如下:
这样的需求,怎么来解决呢?
core code:
- JavaScript部分
<script type = "text/javascript"> var tdContent = $('#test').text() ; $('.test').qtip({ content: tdContent, show: { effect: function() { $(this).slideDown(); } }, hide: { effect: function() { $(this).slideUp(); } } }); </script>
- CSS部分
<style> .ctl{ table-layout:fixed } .ctl td{text-overflow:ellipsis;overflow:hidden;white-space: nowrap;padding:2px}</style>
demo下载地址如下: (访问密码 4d1b)
https://yunpan.cn/cxcGNwLkARYXV
小结:里面用到了一个强大的JQuery插件——qtip(如何使用详情参见我的另外一篇博客:http://blog.csdn.net/t131452n/article/details/50655526)。另外,其中用到了一个css的技术,本人已经封装到了easyUI.css文件中,也是方便自己以后在使用JQuery——easyUI的过程中达到更好的复用效果。简单的来说,就是改了改easyUI的一些底层代码。
0 0
- 前端实战——完美解决文本框超出内容用“……”表示,鼠标滑过时显示隐藏内容
- 超出文本内容用...表示
- ul中内容单行显示,超出隐藏
- 将行内超出内容进行隐藏,并在鼠标移至行时显示全部内容
- css 控制超出内容 用省略号表示
- 解决html表格中内容超出不强制换行和超出宽度自动隐藏并显示省略号
- 字段内容过多,隐藏内容,鼠标移上…
- Android EditText 文本内容超过文本框失去焦点后,超出文本框内容显示...
- CSS 将超出显示宽度的内容隐藏起来(转)
- 表格内容超出用省略号显示
- 内容超出后显示省略号
- 鼠标划过显示内容
- 如内容超出单元格,则隐藏
- JS设置文本超出长度,使用省略号,鼠标放上显示完整内容
- 完美解决-绑定gridview时,无内容仍显示表头。
- CSS 实现表格内容超出用省略号显示
- CSS 实现表格内容超出用省略号显示
- CSS 实现表格内容超出用省略号显示
- Maven: 每次更新Maven Project ,JAVA 版本都变为1.5
- 在腾讯的第三堂产品课——爆品的秘密 梁宁-闲花照水录
- BNUOJ 51275 道路修建(并查集)
- Maven: 互联网开发常用的jar以及版本pom.xl文件
- 使用python开源组件yarn-api-client获取yarn信息
- 前端实战——完美解决文本框超出内容用“……”表示,鼠标滑过时显示隐藏内容
- 华为机试题:输入整型数组和排序标识,对其元素按照升序或降序进行排序
- 腾讯的职级系统 梁宁-闲花照水录
- Java中实现反盗链Filter
- Appium环境搭建步骤 For Mac
- http协议笔记
- POJ 1469 COURSES(二分图最大匹配)
- 产品经理的段位——说说腾讯的产品职级 梁宁-闲花照水录
- Arduino代码机制-avr/pgmspace.h