表格和div中文字溢出隐藏加省略号
<!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>
效果：
声明：该文观点仅代表作者本人，牛骨文系教育信息发布平台，牛骨文仅提供信息存储空间服务。
