表格和div中文字溢出隐藏加省略号

最新推荐文章于 2024-07-16 12:36:21 发布

白色的味道

最新推荐文章于 2024-07-16 12:36:21 发布

阅读量5.4k

点赞数 2

分类专栏： css html js

本文链接：https://blog.csdn.net/u011647053/article/details/49127395

版权

css 同时被 3 个专栏收录

1 篇文章 0 订阅

订阅专栏

html

1 篇文章 0 订阅

订阅专栏

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> 表格和div文字溢出隐藏 </title>
<link rel="stylesheet" type="text/css" href="">
<script src="js/jquery-1.11.2.min.js" type="text/javascript"></script>
<style type="text/css">
.container{height:200px;}
.top{margin-left:210px;border:2px solid green; height:200px;}

/*div 溢出隐藏*/
div.bot{
	height:200px; 
	width:200px;
	border:2px solid green;
	float:left;
	overflow:hidden;		/* 内容超出宽度时隐藏超出部分的内容 */ 
	white-space:nowrap;		/* 不换行 */
	text-overflow:ellipsis;	/* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用*/
}

/*表格 溢出隐藏*/
table{
	width:100%;
	border-collapse: collapse;
	table-layout:fixed;/* 只有定义了表格的布局算法为fixed，下面td的定义才能起作用。 */
}
td.td_name{width:30%;}
td{
	border:1px solid; 
	overflow:hidden;		/* 内容超出宽度时隐藏超出部分的内容 */ 
	white-space:nowrap;		/* 不换行 */
	text-overflow:ellipsis;	/* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用*/
}

.error{color:red;}
</style>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 </head>

 <body>

 <div class="container">
	<div class="bot">我在互联网经历过三次行业谷底，最近一年正在经历第三次行业谷底。</div>
	<div class="top">
	<table>
	<tr>
		<td class="td_name">标题</td>
		<td>描述</td>
	</tr>
	<tr>
		<td class="hideTextName" title="中国互联网企业"><a href="#"></a></td>
		<td>十二年以来，我在互联网经历过三次行业谷底，最近一年正在经历第三次行业谷底。整个中国互联网拿到 5000 万美金融资的几十家企业，估值超过 10 亿美金，到今天没有一家上市的。</td>
	</tr>
	<tr>
		<td class="hideTextName" title="十二年以来，我在互联网经历过三次行业谷底，最近一年正在经历第三次行业谷底。">
			<a href="#"><span class="error">[已过期]</span></a>
		</td>
		<td>合肥产品管理中心</td>
	</tr>
	</table></div>
 </div>
  
 </body>

 <script type="text/javascript">
	var overFlowHide = function($td_list){
		//js控制单元格的文字过多时隐藏加省略号
		$td_list.each(function(){
			tdwidth = $(this).width();
			oldTxt = $(this).attr("title");
			spanObj = $(this).find("a span");
			aObj = $(this).find("a");
			maxSize = tdwidth/14;	//最大文字数，总宽度除单个汉字宽度
			dot = "";
			if(oldTxt.length > maxSize){
				dot = "...";
			}
			if(spanObj.text()){
				var trimTxt = oldTxt.substr(0,maxSize-8)+dot;
				aObj.text(trimTxt).append(spanObj);
			}else{
				var trimTxt = oldTxt.substr(<span id="transmark"></span>0,maxSize)+dot;
				if(aObj.length>0)	//如果单元格中包含a标签，则将值赋给a标签
					aObj.text(trimTxt);
				else	//否则直接赋值给td
					$(this).text(trimTxt);
			}
		});
	}
	//js控制单元格的文字过多时隐藏加省略号
		overFlowHide($("td.hideTextName"));
</script>
</html>

效果：

白色的味道

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
表格和div中文字溢出隐藏加省略号

表格和div文字溢出隐藏 .container{height:200px;}.top{margin-left:210px;border:2px solid green; height:200px;}/*div 溢出隐藏*/div.bot{ height:200px; width:200px; border:2px solid green; float:left; ove
复制链接

扫一扫

专栏目录