js 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示实例


Posted in Javascript onDecember 06, 2016

题目中问题一拆为二:

1.文字在超出长度时,如何实现用省略号代替?

2.超长长度的文字在省略显示后,如何在鼠标悬停时,以悬浮框的形式显示出全部信息?

文字在超出长度时,如何实现用省略号代替?

用CSS实现超长字段用省略号表示的方法:所有浏览器兼容!

html代码如下:

<div style="width:150px;overflow:hidden; white-space:nowrap; text-overflow:ellipsis">
用CSS实现超长字段被省略的简单方法
</div>

注意:设置宽度,overflow:hidden, white-space:nowrap, text-overflow:ellipsis四个属性缺一不可。这种写法在所有的浏览器中都能正常显示。

超长长度的文字在省略显示后,如何在鼠标悬停时,以悬浮框的形式显示出全部信息?(此处只讨论以悬浮框显示的方式)

第一种方式:使用div中的title属性:

先来个简单的,一目了然的示例:

<div style='width:120px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;' title='鼠标悬浮显示的内容'>鼠标悬浮显示的内容</div> 
<!--这个内容因为是在div里面,是控制div的宽度来显示你需要看到几个字的长度,超出会显示 ...-->
<!--title:提示信息,鼠标放到该元素上显示的提示信息-->

显示效果,如下图:

js 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示实例

第二种方式:在div中绑定鼠标经过事件

单独的div(包含id属性)通过悬浮框显示,下面代码在谷歌浏览器已测试通过:

<!DOCTYPE html>
<html>
 <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>
      RunJS 演示代码
    </title>
    <style>
      #content{
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        width:200px;
      }
    </style>
    <script>
      onload = function(){
        content.onmouseover = function(){
          this.title = this.innerHTML;
        }
      }
    </script>
 </head>
  <body>
  <div id='content'>
      js 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示
      js 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示
      js 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示
      js 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示
 </div>
 </body>
</html>

多个div(包含class属性)通过悬浮框显示:

由于div标签之间的距离较近,在鼠标悬浮时,悬浮框会出现快速闪显的情况,可以通过调大div的之间的间距,来改善,或者直接改为p标签也可以.

<!DOCTYPE html>
<html>
 <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>
      演示代码
    </title>
    <style>
      .content{
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        width:200px;
      }
    </style>
    <script>
     function overShow(obj,e) {
     var showDiv = document.getElementById('showDiv');
     var theEvent = window.event|| e;
     showDiv.style.left = theEvent.clientX+"px";
     showDiv.style.top = theEvent.clientY+"px";
     showDiv.style.display = 'block';
     //alert(obj.innerHTML);
     showDiv.innerHTML = obj.innerHTML;
     }

     function outHide() {
     var showDiv = document.getElementById('showDiv');
     showDiv.style.display = 'none';
     showDiv.innerHTML = '';
     }
    </script>
 </head>
  <body>
  <div class='content' onmouseover="overShow(this,event)" onmouseout="outHide()">
      js0 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示
      js0 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示
      js0 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示
      js0 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示
  </div>
    <div class='content' onmouseover="overShow(this,event)" onmouseout="outHide()">
      js1 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示
      js1 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示
      js1 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示
      js1 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示
  </div>
    <div class='content' onmouseover="overShow(this,event)" onmouseout="outHide()">
      js2 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示
      js2 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示
      js2 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示
      js2 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示
  </div>
    <div class='content' onmouseover="overShow(this,event)" onmouseout="outHide()">
      js3 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示
      js3 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示
      js3 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示
      js3 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示
  </div>
  <div id="showDiv" style="position: absolute; background-color: white; border: 1px solid black;"></div>
 </body>

</html>

显示效果,如下图:

js 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示实例

补充:

js 文字超出长度用省略号代替,鼠标悬浮时,直接显示出全部信息(不以悬浮框的形式)

<!DOCTYPE html>
<html>
 <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>
      RunJS 演示代码
    </title>
    <!-- 如果是id属性,将.改为#即可 -->
    <style>
      .content{
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        width:200px;
      }
      .content:hover {height: auto;white-space: normal;} 
    </style>
 </head>
  <body>
  <div class='content'>
      js1 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示
      js1 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示
      js1 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示
      js1 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示
  </div>
    <div class='content'>
      js2 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示
      js2 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示
      js2 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示
      js2 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示
  </div>
 </body>
</html>

存在的问题:

当鼠标悬停时,省略的内容在全部显示出来之后,会挤压下方的内容,当是多行显示时,容易造成页面错乱.如图:

js 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示实例

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
60个很实用的jQuery代码开发技巧收集
Dec 15 Javascript
JavaScript将数组转换成CSV格式的方法
Mar 19 Javascript
js实现字符串转日期格式的方法
May 20 Javascript
jquery分析文本里url或邮件地址为真实链接的方法
Jun 20 Javascript
js判断出两个字符串最大子串的函数实现方法
Nov 01 Javascript
js调用屏幕宽度的简单方法
Nov 14 Javascript
手机端js和html5刮刮卡效果
Sep 29 Javascript
AngularJS中使用three.js的实例详解
Jul 21 Javascript
结合Vue控制字符和字节的显示个数的示例
May 17 Javascript
关于TypeScript模块导入的那些事
Jun 12 Javascript
vue和better-scroll实现列表左右联动效果详解
Apr 29 Javascript
JavaScript中BOM对象原理与用法分析
Jul 09 Javascript
关于 jQuery Easyui异步加载tree的问题解析
Dec 06 #Javascript
JavaScript之Vue.js【入门基础】
Dec 06 #Javascript
浅析JavaScript中作用域和作用域链
Dec 06 #Javascript
利用JS轻松实现获取表单数据
Dec 06 #Javascript
手机移动端实现 jquery和HTML5 Canvas的幸运大奖盘特效
Dec 06 #Javascript
Javascript highcharts 饼图显示数量和百分比实例代码
Dec 06 #Javascript
jQuery EasyUI 获取tabs的实例解析
Dec 06 #Javascript
You might like
php使用smtp发送支持附件的邮件示例
2014/04/13 PHP
PHP图像处理之使用imagecolorallocate()函数设置颜色例子
2014/11/19 PHP
PHP YII框架开发小技巧之模型(models)中rules自定义验证规则
2015/11/16 PHP
JQuery 简便实现页面元素数据验证功能
2007/03/24 Javascript
jquery解决图片路径不存在执行替换路径
2013/02/06 Javascript
javascript中parentNode,childNodes,children的应用详解
2013/12/17 Javascript
node.js 开发指南 ? Node.js 连接 MySQL 并进行数据库操作
2014/07/29 Javascript
jQuery实现的调整表格行tr上下顺序
2016/01/10 Javascript
全面解析Bootstrap中tooltip、popover的使用方法
2016/06/13 Javascript
详解Angular中的自定义服务Service、Provider以及Factory
2017/04/22 Javascript
详解Windows下安装Nodejs步骤
2017/05/18 NodeJs
Ionic2开发环境搭建教程
2020/08/20 Javascript
微信小程序支付前端源码
2018/08/29 Javascript
JavaScript时间与时间戳的转换操作实例分析
2018/12/07 Javascript
javascript+HTML5 canvas绘制时钟功能示例
2019/05/15 Javascript
angular使用md5,CryptoJS des加密的方法
2019/06/03 Javascript
layui 对table中的数据进行转义的实例
2019/09/12 Javascript
jQuery利用cookie 实现本地收藏功能(不重复无需多次命名)
2019/11/07 jQuery
解决element-ui里的下拉多选框 el-select 时,默认值不可删除问题
2020/08/14 Javascript
JavaScript日期库date-fn.js使用方法解析
2020/09/09 Javascript
[02:31]DOTA2帕克 英雄基础教程
2013/11/26 DOTA
[44:15]DOTA2上海特级锦标赛主赛事日 - 5 败者组决赛Liquid VS EG第二局
2016/03/06 DOTA
python利用Guetzli批量压缩图片
2017/03/23 Python
Python复数属性和方法运算操作示例
2017/07/21 Python
python 信息同时输出到控制台与文件的实例讲解
2018/05/11 Python
启动Atom并运行python文件的步骤
2018/11/09 Python
python切片(获取一个子列表(数组))详解
2019/08/09 Python
python 写函数在一定条件下需要调用自身时的写法说明
2020/06/01 Python
护士个人简历自荐信
2013/10/18 职场文书
门卫岗位职责
2013/11/15 职场文书
运动会800米加油稿
2014/02/22 职场文书
竞聘书模板
2014/03/31 职场文书
2014幼儿教师个人工作总结
2014/12/03 职场文书
通知函的格式
2015/04/27 职场文书
2015年幼儿园安全工作总结
2015/05/12 职场文书
动作冒险《Hell Is Us》将采用虚幻5 消灭怪物探索王国
2022/04/13 其他游戏