要实现table单元格最大宽度和列数的设置，并且超出部分末尾显示省略号，在网上找了好久终于解决。
参考 ：
https://blog.csdn.net/qq_27064559/article/details/81739463
https://bbs.csdn.net/topics/30118907
以下是实现。
<html>
<head>
<style>
.ell1 { /*单行省略*/
width: 100px;
height: 100px;
overflow: hidden; /*超过区域就隐藏*/
white-space: nowrap; /*规定段落中的文本不进行换行*/
text-overflow: ellipsis; /*显示省略符号来代表被修剪的文本。*/
}
.ell2 { /*多行省略*/
max-width: 95px;
max-height: 50px;
overflow: hidden; /*超过区域就隐藏*/
/*display: -webkit-box;*/ /*-webkit- 是浏览器前缀，兼容旧版浏览器的 即为display: box;*/
-webkit-line-clamp: 2; /*限制在一个块元素显示的文本的行数*/
-webkit-box-orient: vertical; /*box-orient 属性规定框的子元素应该被水平或垂直排列。horizontal：水平，vertical：垂直*/
word-break: break-all; /*word-break 属性规定自动换行的处理方法 ，break-all：允许在单词内换行。*/
}
</style>
<script>
function gettextareavalue1() {
var strhtml = "<font color=\"red\">1</font>2"
document.getElementById("textarea").outerHTML = strhtml
}
function gettextareavalue2() {
//var strhtml = "<font color=\"red\">1</font>2"
var strhtml = "aaa";
document.getElementById("textarea").outerHTML = strhtml
}
</script>
</head>
<body>
<table border=1 >
<tr>
<td class="ell2" onclick="alert(this.textarea)"><font color="red">11</font>2</td>
<td class="ell2" onclick="textarea.outerHTML=" 12"><font color="#FF0000">11111111111111111111111111111111111111111111111111111111111111111111111</font>2</td>
</tr>
<tr>
<td class="ell2" onclick="gettextareavalue1()">000000000<font color="#FF0000">10</font>000000002000000000300000000040000000005</td>
<td class="ell2" onclick="gettextareavalue2()">22</td>
</tr>
</table>
<textarea id="textarea" rows="3" cols="20" >
w3school
</textarea>
</body>
</html>