判断文本宽度，给其添加title属性

最新推荐文章于 2024-06-06 12:06:28 发布

钟HL

最新推荐文章于 2024-06-06 12:06:28 发布

阅读量1.6k

点赞数 1

分类专栏：编程文章标签： JSP 文本过长

本文链接：https://blog.csdn.net/qq_39769369/article/details/81631711

版权

编程专栏收录该内容

7 篇文章 0 订阅

订阅专栏

适用情况：有些菜单文字超出范围，将其超出的范围隐藏，用'...'代替，再给其添加title属性显示全部，但是,不是每个菜单都要加title属性，这时就判断文本宽度，进行判断，只给超出范围的添加title属性。

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>文本内容过长</title>
<script type="text/javascript" src="js/jquery-1.7.js"></script>
<style type="text/css">
</style>
</head>
<body>
	<div id="div1" onmouseover="mouseOver()"
		style="border: 1px solid #000;width: 200px">
		<div id="div2"
			style="width:100px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; cursor: pointer;">测试测试测试测试测试测试测试</div>
		<div id="div3" style="display: none;"></div>
	</div>
	<script type="text/javascript">
		function mouseOver() {
			//alert("123123213123123");
			var div2text = $("#div2").html();
			$("#div3").html(div2text);
			var width = $("#div3").width();
			if (eval(width) >= 100) {
				$("#div2").attr("title",div2text);
			}
		}
	</script>
</body>
</html>

钟HL

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
判断文本宽度，给其添加title属性

适用情况：有些菜单文字超出范围，将其超出的范围隐藏，用'...'代替，再给其添加title属性显示全部，但是,不是每个菜单都要加title属性，这时就判断文本宽度，进行判断，只给超出范围的添加title属性。&lt;%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%&gt;...
复制链接

扫一扫

专栏目录