jquery 判断文字是否超出div出现三个点的省略号
现在有个需求,就是一个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出现三个点的省略号的更多相关文章
- jquery判断滚动到某个div显示底部按钮
判读滚动某个div显示底部按钮 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta char ...
- jquery 判断checkbox是否为空的三种方法
//方法一: if ($("#checkbox-id")get(0).checked) { // do something } //方法二:也适用于单选按钮 if($('#chec ...
- CSS------当内容超出div宽度后自动换行和限制文字不超出div宽度和高度
如图: 1.自动换行 </div> 2.限制宽高度 </div> (注意:如果div放在li中还需要加上display:inline-block属性)
- 设置当内容超出div(文字长度超出div宽度)出现滚动条
overflow 一共有5个属性. 1.overflow:auto:内容会被修剪,超出设置的宽高后会出现滚动条 2.overflow:scroll;内容会被修剪,不管内容是否超出,都会出现滚动条的位置 ...
- 超出div宽度范围的文字进行省略号省略,在鼠标移上去以后显示完整的内容
一.前言 当我们在固定的范围内显示内容时,我们是希望能够完整显示的,然而往往事与愿违,文本会超出我们给定的范围,这时候怎么办呢? 二.超出范围,对文本进行省略号隐藏 先上图 代码很简单 div{ wi ...
- C#中??和?分别是什么意思? 在ASP.NET开发中一些单词的标准缩写 C#SESSION丢失问题的解决办法 在C#中INTERFACE与ABSTRACT CLASS的区别 SQL命令语句小技巧 JQUERY判断CHECKBOX是否选中三种方法 JS中!=、==、!==、===的用法和区别 在对象比较中,对象相等和对象一致分别指的是什么?
C#中??和?分别是什么意思? 在C#中??和?分别是什么意思? 1. 可空类型修饰符(?):引用类型可以使用空引用表示一个不存在的值,而值类型通常不能表示为空.例如:string str=null; ...
- jquery判断div是否显示或者隐藏
jquery判断div是否显示或者隐藏 很多时候会要判断一个div是不是显示着,没显示要怎么处理,显示的如何处理: 方法很简单,选择到你要判断的div,再用is(':hidden')判断是否隐藏:或者 ...
- CSS实现超出DIV宽度文字自动隐藏并显示省略号
当文字超出DIV宽度时,超出的文字部分省略,并用显示省略号代替,css代码如下: div.ellipsis { padding-left: 5px; text-align: left; text-ov ...
- JQuery判断div(控件)是否为隐藏
以下是JavaScript 中判断div是否为隐藏代码引用片段: if (div.style.display == "none") { div.style.display = &q ...
随机推荐
- PowerDesigner_15连接Oracle11g,反向工程导出模型图
1.启动PowerDesigner2.菜单:File->ReverseEngineer->Database出来NewPhysicalDataModel对话框,DBMS选择ORACLEVer ...
- java 编码设计细节
1.hibernate注解 @Validated({ APIGetsGroup.class })@NotBlank(message = "{cameraReceive.captureId.e ...
- Mysql-慢查询排查
1.开启慢日志 2.使用show full processlist抓出慢查询语句 3.使用explain分析语句 4. set global profiling = ON
- spring boot1.1 idea + springboot + mybatis(mybatis-generator) +mysql +html实现简单的登录注册
前言 这两年springboot比较火,而我平时的工作中不怎么使用spring boot,所以工作之余就自己写写项目练练手,也跟大家一起学习. 打算从最开始的搭架子,登录注册,到后台管理的增删改查,业 ...
- <<C++ Primer>> 术语表 (总) (待补充)
术语表 目录 第 1 章 开始 第 I 部分 C++基础 第 2 章 变量和基本类型 第 3 章 字符串, 向量和数组 第 4 章 表达式 第 5 章 语句 第 6 章 函数 第 7 章 类 第 II ...
- php常用header状态
<?php //200 正常状态 header('HTTP/1.1 200 OK'); // 301 永久重定向,记得在后面要加重定向地址 Location:$url header('HTTP/ ...
- BZOJ 3189. [Coci2011]Slika
传送门 有回档操作,考虑离线,这样就知道最终的操作序列了 发现前面的操作会被后面覆盖,干脆直接从后往前操作,如果一个位置以前染色过了那就不用再染色 所以我们可以用 $n$ 个链表维护 $n$ 个行,操 ...
- mysql数据库基础命令(一)
用户与权限 创建用户 mysql>create user test identified by 'BaC321@#'; 修改密码 ##5.5版本及以前的命令 mysql>set passw ...
- Xshell6,亲测可用~破解版简单解压免安装~已更新官方版本安装方法
下面的内容别看了,使用这个最新的安装官方版本 https://www.cnblogs.com/taopanfeng/p/11671727.html 下面的内容别看了,使用这个最新的安装官方版本 htt ...
- 如何正确训练一个 SVM + HOG 行人检测器
这几个月一直在忙着做大论文,一个基于 SVM 的新的目标检测算法.为了做性能对比,我必须训练一个经典的 Dalal05 提出的行人检测器,我原以为这个任务很简单,但是我错了. 为了训练出一个性能达标的 ...