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 相关文章推荐
Jquery 插件开发笔记整理
Jan 17 Javascript
关于onScroll事件在IE6下每次滚动触发三次bug说明
Sep 21 Javascript
JS localStorage实现本地缓存的方法
Jun 22 Javascript
jQuery对下拉框,单选框,多选框的操作
Feb 21 Javascript
理解Javascript的动态语言特性
Jun 17 Javascript
jQuery实现移动端手机商城购物车功能
Sep 24 Javascript
KnockoutJS 3.X API 第四章之数据控制流with绑定
Oct 10 Javascript
jQuery动态创建元素以及追加节点的实现方法
Oct 20 Javascript
JavaScript 过滤关键字
Mar 20 Javascript
vue.js事件处理器是什么
Mar 20 Javascript
深入浅析JS中的严格模式
Jun 04 Javascript
微信小程序input框中加入小图标的实现方法
Jun 19 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
ThinkPHP3.1的Widget新用法
2014/06/19 PHP
PHP使用CURL实现多线程抓取网页
2015/04/30 PHP
Smarty简单生成表单元素的方法示例
2016/05/23 PHP
PHP时间类完整代码实例
2021/02/26 PHP
PHP 出现 http500 错误的解决方法
2021/03/09 PHP
javascript游戏开发之《三国志曹操传》零部件开发(四)用地图块拼成大地图
2013/01/23 Javascript
怎么清空javascript数组
2013/05/11 Javascript
js toFixed()方法的重写实现精度的统一
2014/03/06 Javascript
Js实现动态添加删除Table行示例
2014/04/14 Javascript
javascript实现浏览器窗口传递参数的方法
2014/09/03 Javascript
Bootstrap开发实战之第一次接触Bootstrap
2016/06/02 Javascript
Node.js与MySQL交互操作及其注意事项
2016/10/05 Javascript
详解vue-Resource(与后端数据交互)
2017/01/16 Javascript
Base64(二进制)图片编码解析及在各种浏览器的兼容性处理
2017/02/09 Javascript
纯JS实现图片验证码功能并兼容IE6-8(推荐)
2017/04/19 Javascript
微信小程序使用checkbox显示多项选择框功能【附源码下载】
2017/12/11 Javascript
详解react-native WebView 返回处理(非回调方法可解决)
2018/02/27 Javascript
Vue自定义指令封装节流函数的方法示例
2018/07/09 Javascript
zepto.js 实时监听输入框的方法
2018/12/04 Javascript
Vue源码中要const _toStr = Object.prototype.toString的原因分析
2018/12/09 Javascript
微信小程序实现判断是分享到群还是个人功能示例
2019/05/03 Javascript
JavaScript实现鼠标经过表格某行时此行变色
2020/11/20 Javascript
[01:52]深扒TI7聊天轮盘语音出处7
2017/05/11 DOTA
用Python编程实现语音控制电脑
2014/04/01 Python
Python实现XML文件解析的示例代码
2018/02/05 Python
Tensorflow矩阵运算实例(矩阵相乘,点乘,行/列累加)
2020/02/05 Python
将pycharm配置为matlab或者spyder的用法说明
2020/06/08 Python
python 实现音频叠加的示例
2020/10/29 Python
python Zmail模块简介与使用示例
2020/12/19 Python
教师个人剖析材料
2014/02/05 职场文书
高中物理教学反思
2014/02/08 职场文书
节水口号标语
2014/06/19 职场文书
学校法制宣传月活动总结
2014/07/03 职场文书
2014年法院工作总结
2014/11/24 职场文书
课文《燕子》教学反思
2016/02/17 职场文书
python基础学习之递归函数知识总结
2021/05/26 Python