现在有个需求，就是一个div宽度固定，但是文字可能会超出，超出出现三个点省略，然后鼠标划入的时候显示全部，不超出鼠标划入就不显示，这就意味着要判断文字是否超出了

参考代码

<html lang="en">

 <head>

  <title>Document</title>

 </head>

 <body>

	<div class="main-left">

		<span class="word fl">填报日期填报日期填报日期填报日期填报日期</span>

		<span>:</span>

		<span class="title">人填报人填报人填报人填报人</span>

	</div>

		<div class="main-right">

		<div class="layui-inline input-width-full">

			<input type="text" class="layui-input" placeholder="">

		</div>

	</div>

	<script>

		$(".main-left > .word").mouseenter(function (e) {

			var thisWidth = $(this).width(); // div 的宽度

			var wordWidth = $(this)[0].scrollWidth; // 先转为js对象; 文字的宽度

			if(wordWidth > thisWidth+5){ // 加5是为了让div宽度多一点,比文字不超出时多宽,因为文字不超出,那么宽度为div的宽度

				$(this).siblings('span.title').html($(this).text()).show();

			}

		})

		$(".main-left > .word").mouseleave(function () {

			// layer.msg('显示')

			$(this).siblings('span.title').hide();

		})

	</script>

 </body>

</html>

jquery 判断文字是否超出div出现三个点的省略号的更多相关文章

  1. jquery判断滚动到某个div显示底部按钮

    判读滚动某个div显示底部按钮 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta char ...

  2. jquery 判断checkbox是否为空的三种方法

    //方法一: if ($("#checkbox-id")get(0).checked) { // do something } //方法二:也适用于单选按钮 if($('#chec ...

  3. CSS------当内容超出div宽度后自动换行和限制文字不超出div宽度和高度

    如图: 1.自动换行 </div> 2.限制宽高度 </div> (注意:如果div放在li中还需要加上display:inline-block属性)

  4. 设置当内容超出div（文字长度超出div宽度）出现滚动条

    overflow 一共有5个属性. 1.overflow:auto:内容会被修剪,超出设置的宽高后会出现滚动条 2.overflow:scroll;内容会被修剪,不管内容是否超出,都会出现滚动条的位置 ...

  5. 超出div宽度范围的文字进行省略号省略，在鼠标移上去以后显示完整的内容

    一.前言 当我们在固定的范围内显示内容时,我们是希望能够完整显示的,然而往往事与愿违,文本会超出我们给定的范围,这时候怎么办呢? 二.超出范围,对文本进行省略号隐藏 先上图 代码很简单 div{ wi ...

  6. C#中??和？分别是什么意思？ 在ASP.NET开发中一些单词的标准缩写 C#SESSION丢失问题的解决办法 在C#中INTERFACE与ABSTRACT CLASS的区别 SQL命令语句小技巧 JQUERY判断CHECKBOX是否选中三种方法 JS中!=、==、!==、===的用法和区别 在对象比较中，对象相等和对象一致分别指的是什么？

    C#中??和?分别是什么意思? 在C#中??和?分别是什么意思? 1. 可空类型修饰符(?):引用类型可以使用空引用表示一个不存在的值,而值类型通常不能表示为空.例如:string str=null; ...

  7. jquery判断div是否显示或者隐藏

    jquery判断div是否显示或者隐藏 很多时候会要判断一个div是不是显示着,没显示要怎么处理,显示的如何处理: 方法很简单,选择到你要判断的div,再用is(':hidden')判断是否隐藏:或者 ...

  8. CSS实现超出DIV宽度文字自动隐藏并显示省略号

    当文字超出DIV宽度时,超出的文字部分省略,并用显示省略号代替,css代码如下: div.ellipsis { padding-left: 5px; text-align: left; text-ov ...

  9. JQuery判断div(控件)是否为隐藏

    以下是JavaScript 中判断div是否为隐藏代码引用片段: if (div.style.display == "none") { div.style.display = &q ...

随机推荐

  1. HTML DOM Document对象 元素对象 属性对象 事件对象

    DOM Document对象 DOM 元素 对象 DOM 属性 对象 DOM 事件 菜鸟教程上 总结挺全的,就不多废话,链接点进去即可.. 后期对经常用到的会在此更新一些总结..... 开学了...自 ...

  2. #Java学习之路——基础阶段二（第十二篇）

    我的学习阶段是跟着CZBK黑马的双源课程,学习目标以及博客是为了审查自己的学习情况,毕竟看一遍,敲一遍,和自己归纳总结一遍有着很大的区别,在此期间我会参杂Java疯狂讲义(第四版)里面的内容. 前言: ...

  3. DMA（Direct Memory Access直接存储器访问）总结

    转载于http://blog.csdn.net/peasant_lee/article/details/5594753 DMA一种高速的数据传输操作,允许在外部设备和存储器之间直接读写数据,不需要CP ...

  4. [IJCAI-17 口碑商家客流量预测]

    IJCAI-17 口碑商家客流量预测               第 1 赛季截止日期        2017/03/14 赛制介绍 重要时间2月8日 08:00: 评测启动3月7日 10:00: 报 ...

  5. 即时通讯IM

    即时通讯(Instant Messaging,后简称im)消息的可靠投递 一.报文类型 im的客户端与服务器通过发送报文(也就是网络包)来完成消息的传递 报文分为: 请求报文(request,后简称为 ...

  6. dp常见优化方法

    noip范围内的dp优化方法: 加速状态转移 1.前缀和优化 2.单调队列优化 3.线段树或树状数组优化 精简状态 3:精简状态往往是通过对题目本身性质的分析,去省掉一些冗余的状态.相对以上三条套路性 ...

  7. POJ - 2421 Constructing Roads（最小生成树&并查集

    There are N villages, which are numbered from 1 to N, and you should build some roads such that ever ...

  8. Luogu P1650 田忌赛马

    题目 如果我们最大比对面最大大,那么直接用. 如果我们最小比对面最小大,那么直接用. 否则用我们最小去换对面最大. #include<bits/stdc++.h> using namesp ...

  9. pythonWeb框架创建app模块以及虚拟环境管理工具

    在进行项目搭建的时候,如果有多个功能模块,以及多个网页地址时,为了系统的可维护性,以及易读性,我们大多数情况下选择模块化开发 所以我们就要使用app指令来创建不同的功能模块 首先项目框架如下: 接下来 ...

  10. ElasticSearch5.3安装IK分词器并验证

    ElasticSearch5.3安装IK分词器 之前使用Elasticsearch安装head插件成功了,但是安装IK分词器却失败了.貌似是ElasticSearch5.0以后就不支持直接在elast ...