在项目中自己遇到了版面设计固定了宽高，但内容超出了设定的宽高，我们为了美观会把超出的部分隐藏掉，但这时用户想看全部内容，就需要我们开发者动态的添加title属性！
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
table {
500px;
table-layout:fixed;/* 只有定义了表格的布局算法为fixed，下面td的定义才能起作用。 */
}
tr {
100px;
height: 30px;
}
td {
100px;
height: 30px;
white-space: nowrap;
/* 不换行 */
overflow: hidden;
/* 内容超出宽度时隐藏超出部分的内容 */
text-overflow: ellipsis;
/* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/
}
</style>
</head>
<body>
<table border="" cellspacing="0" cellpadding="0">
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Datafsfwefewfwefwefwe</td>
<td>Data</td>
<td>Data</td>
<td>Datfsdfsdfsdfa</td>
</tr>
<tr>
<td>Data</td>
<td>Da水电费rtertre色东方施工ta</td>
<td>Data</td>
<td>Dat顺丰到付a</td>
</tr>
<tr>
<td>Data</td>
<td>多个</td>
<td>是法国的沙发上fhfgdfgf1</td>
<td>多个发光hahahahahaha飞碟</td>
</tr>
</table>
<script type="text/javascript">
//鼠标移上去动态添加title属性
var Td = document.getElementsByTagName('td');
for(var i = 0; i < Td.length; i++) {
Td[i].onmouseover = function() {
this.title = this.innerHTML;
};
}
</script>
</body>
</html>