实现数据一行展示不换行，不出滚动条

最新推荐文章于 2024-04-30 16:57:21 发布

qq_30461115

最新推荐文章于 2024-04-30 16:57:21 发布

阅读量599

点赞数

文章标签： javascript 不换行省略号自适应提示框

本文链接：https://blog.csdn.net/qq_30461115/article/details/76667378

版权

没事瞎搞，进行了又一次更新，加了自己的提示框。

上图（效果不重要，提示框可以自己修改嘛）：

好啦上代码：

line_js.html

<!DOCTYPE html>
<html>
	<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
	<script type="text/javascript" src="js/line_change2.js"></script>
	<style>
		table {
			border-collapse: collapse;
			border-spacing: 0;
		}
		
		th,td {
			padding: 0;
		}
		#myTitle{
			position: absolute;
			z-index: 100;
			background: red;
		}
	</style>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="myTitle"></div>
		<table style="width: 100%;">
			<tr class="line_zyq">
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr class="line_zyq">
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr class="line_zyq">
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr class="line_zyq">
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
		</table>
	</body>

</html>

line_change2.js

//如果添加了padding属性请自行修改
var tr_tds = [
	["我忘了闹分手的放他", "我忘了闹分手我忘了闹分手我忘了闹分手我忘了闹分手我的", "我忘了闹分手我忘了闹分手我忘了闹分手", 
"我忘了闹分手的", "我忘了闹分手我忘了闹分手我忘了闹分手我忘了闹分手"],
	["我忘了闹分手的放他", "我忘了闹分手我忘了闹分手我忘了闹分手我忘了闹分手我的", "我忘了闹分手我忘了闹分手我忘了闹分手", 
"我忘了闹分手的", "我忘了闹分手我忘了闹分手我忘了闹分手我忘了闹分手"],
	["我忘了闹分手的放他", "我忘了闹分手我忘了闹分手我忘了闹分手我忘了闹分手我的", "我忘了闹分手我忘了闹分手我忘了闹分手", 
"我忘了闹分手的", "我忘了闹分手我忘了闹分手我忘了闹分手我忘了闹分手"],
	["我忘了闹分手的放他", "我忘了闹分手我忘了闹分手我忘了闹分手我忘了闹分手我的", "我忘了闹分手我忘了闹分手我忘了闹分手",
 "我忘了闹分手的", "我忘了闹分手我忘了闹分手我忘了闹分手我忘了闹分手"]
]
var tr_tds_html = [
	["<h1>我忘了闹分手的放他</h1>", "<h1>我忘了闹分手我忘了闹分手我忘了闹分手我忘了闹分手我的我忘了闹分手我忘了闹分手我忘
了闹分手我忘了闹分手我的我忘了闹分手我忘了闹分手我忘了闹分手我忘了闹分手我的我忘了闹分手我忘了闹分手我忘了闹分手我忘了闹分手我
的我忘了闹分手我忘了闹分手我忘了闹分手我忘了闹分手我的我忘了闹分手我忘了闹分手我忘了闹分手我忘了闹分手我的</h1>", 
"<h1>我忘了闹分手我忘了闹分手我忘了闹分手</h1>", "<h1>我忘了闹分手的</h1>", "<h1>我忘了闹分手我忘了闹分手我忘了闹分手我忘了闹分手</h1>"],
	["<h1>我忘了闹分手的放他</h1>", "<h1>我忘了闹分手我忘了闹分手我忘了闹分手我忘了闹分手我的</h1>",
 "<h1>我忘了闹分手我忘了闹分手我忘了闹分手</h1>", "<h1>我忘了闹分手的</h1>", "<h1>我忘了闹分手我忘了闹分手我忘了闹分手我忘了闹分手</h1>"],
	["<h1>我忘了闹分手的放他</h1>", "<h1>我忘了闹分手我忘了闹分手我忘了闹分手我忘了闹分手我的</h1>",
 "<h1>我忘了闹分手我忘了闹分手我忘了闹分手</h1>", "<h1>我忘了闹分手的</h1>", "<h1>我忘了闹分手我忘了闹分手我忘了闹分手我忘了闹分手</h1>"],
	["<h1>我忘了闹分手的放他</h1>", "<h1>我忘了闹分手我忘了闹分手我忘了闹分手我忘了闹分手我的</h1>",
 "<h1>我忘了闹分手我忘了闹分手我忘了闹分手</h1>", "<h1>我忘了闹分手的</h1>", "<h1>我忘了闹分手我忘了闹分手我忘了闹分手我忘了闹分手</h1>"]
]
var windowWidth = 0;

function line_change() {
//	$("#myTitle").mousemove(function(e) {
		//		var mouseX=e.pageX;var mouseY=e.pageY;
		//		var myTitleX=$("#myTitle").offset().left;
		//		var myTitleY=$("#myTitle").offset().top;
		//		var myTitleWidth=$("#myTitle").width();
		//		var myTitleHeigth=$("#myTitle").height();
		//		if(mouseX>myTitleX&&mouseY>myTitleY&&mouseX<myTitleX+myTitleWidth&&mouseY<myTitleY+myTitleHeigth){
		//			$("#myTitle").show();
		//		}else{
		//			$("#myTitle").fadeOut();
		//		}
//	});
	$(".line_zyq").each(function(n) {
		var s = $(this).css("font-size");
		var ss = s.substring(0, s.length - 2);
		//当前行可以放的最大字数
		var lineNum = $(this).width() / parseInt(ss)
		var sum = 0;
		for(var i = 0; i < tr_tds[n].length; i++) {
			sum += tr_tds[n][i].length;
		}
		if(lineNum > sum) {
			$(this).children().each(function(m) {
				$(this).text(tr_tds[n][m])
			});
		} else {
			//放不下需处理
			//算出平均的列宽
			var defaultColWidth = $(this).width() / tr_tds[n].length;
			//算出平均每列可以放几个字
			var defaultColFontNum = lineNum / tr_tds[n].length;
			//存放每列有几个字
			var tds = [];
			//算出真实情况的每列应该放几个字
			var colFontNum = [];
			for(var i = 0; i < tr_tds[n].length; i++) {
				tds[i] = tr_tds[n][i].length;
			}
			tds = tds.sort(function(a, b) {
				return a - b;
			});
			//			alert(tds+"    "+defaultColFontNum);
			var newLineNum = lineNum;
			for(var i = 0; i < tds.length; i++) {
				//这个判断条件可以按照大家的想法修改
				if(tds[i] < defaultColFontNum) {
					colFontNum[i] = tds[i];
					newLineNum -= tds[i];
					defaultColFontNum = (newLineNum) / (tr_tds[n].length - 1 - i);
				} else {
					colFontNum[i] = defaultColFontNum;
				}
			}
			//			alert(tds+"            "+colFontNum);
			$(this).children().each(function(m) {
				for(var i = 0; i < tds.length; i++) {
					if(tds[i] == tr_tds[n][m].length) {
						$(this).html(tr_tds[n][m].substring(0, colFontNum[i] - 1) + "...");
						$(this).mouseenter(function() {
							var x = $(this).offset().left;
							var y = $(this).offset().top;
							$("#myTitle").css({
								"left": x,
								"top": y
							})
							$("#myTitle").html(tr_tds_html[n][m])
//							$("#myTitle").fadeIn();
							$("#myTitle").show();
						});
						$("#myTitle").mouseleave(function(){
//							$("#myTitle").fadeOut();
							$("#myTitle").hide();
						})
						break;
					}
				}
				
			});
		}
		//		alert(sum + "        " + $(this).width() / parseInt(ss));
	});
}
$(document).ready(line_change);
$(window).resize(function() {
	if(windowWidth != $(window).width()) {
		windowWidth = $(window).width();
		line_change();
	}
})

ok啦，根据自己的需求修改吧。

qq_30461115

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
实现数据一行展示不换行，不出滚动条

没事瞎搞，进行了又一次更新，加了自己的提示框。上图（效果不重要，提示框可以自己修改嘛）：好啦上代码：line_js.html table { border-collapse: collapse; border-spacing: 0; } th,td { padding: 0; } #myTitle{ positio
复制链接

扫一扫