span显示省略内容

最新推荐文章于 2023-09-08 13:04:35 发布

知来者犹可追

最新推荐文章于 2023-09-08 13:04:35 发布

阅读量1.4k

点赞数

分类专栏：前端

前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<head>
	<meta charset="utf-8" />
	<title></title>
	<link rel="stylesheet" href="css/bootstrap.css" />
	<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
	<script type="text/javascript" src="js/vue.js"></script>
	<style>
		/*div {
			float: left;
		}*/
		*{
			font-size: 18px;
		}
		#spans {
			position: absolute;
			border: 1px solid #333;
			background: #F5F5F5;
			padding: 1px;
			color: #333;
			display: none;
		}
	</style>
</head>

<body>
	<div class="row">
		<div class="col-md-12">
			<div class="col-md-4">
				<span>123aa </span>
				<span class="spans" style="display: inline-block; width: 100px;overflow: hidden;textOverflow: ellipsis;whiteSpace: nowrap" title="111111111111111111111111">11111111111111111111111111111111111111</span>
			</div>
			<div class="col-md-4">
				<span>123aa </span>
				<span class="spans" style="display: inline-block;width: 100px;overflow: hidden;textOverflow: ellipsis;whiteSpace: nowrap" title="111111111111111111111111111111111">1111111111111111111111111111111111</span>
			</div>
			<div class="col-md-4">
				<span>123aa</span>
				<span class="spans" style="display: inline-block;  width: 100px;overflow: hidden;textOverflow: ellipsis;whiteSpace: nowrap" title="1111111111111111111111111111111111">11111111111111111111111111111</span>
			</div>
		</div>
	</div>

	<!--<div>
		aaaa<span style="display: inline-block;  width: 100px;overflow: hidden;textOverflow: ellipsis;whiteSpace: nowrap">bbbbbbbbbbbbbbbbbbbbbbbbbbbbb</span>
	</div>
	<input style="display:none;" />
	<script>
		$('div').hover(function() {
			$('span', this).show()
		}, function() {
			$('span', this).hide();
		})
	</script>-->
</body>
<script>
	var x = 20;
	var y = 10;
	var newtitle = '';
	$('span.spans').mouseover(function(e) {
		newtitle = this.title;
		this.title = '';
		$('body').append('<div id="spans">' + newtitle + '</div>');
		$('#spans').css({
			'left': (e.pageX + x + 'px'),
			'top': (e.pageY + y + 'px')
		}).show();
	}).mouseout(function() {
		this.title = newtitle;
		$('#spans').remove();
	}).mousemove(function(e) {
		$('#spans').css({
			'left': (e.pageX + x + 'px'),
			'top': (e.pageY + y + 'px')
		}).show();
	})
</script>