To achieve the maximum width of the table cell and set the number of columns, and beyond the end of the section shows the ellipsis, the Internet looking for a long time and finally resolved.
reference:
https://blog.csdn.net/qq_27064559/article/details/81739463
https://bbs.csdn.net/topics/30118907
The following is achieved.
<HTML>
<head>
<style>
.ell1 {/ * omitted single row * /
width: 100px;
height: 100px;
overflow: hidden; / * exceeding hidden area * /
White-Space: nowrap; / * specified in paragraphs text is not wrap * /
text-overflow: ellipsis; / * display omitted pruned symbols to represent text. * /
}
.ell2 {/ * omitted multi-line * /
max-width: 95px;
max-height: 50px;
overflow: hidden; / * exceeding hidden area * /
/ * the display: -webkit-Box; * / / * - webkit- prefix is a browser, the browser that is compatible with older the display: Box; * /
-webkit-line-CLAMP: 2; / * limits the number of lines in a block of text elements displayed * /
-webkit-Box-Orient: Vertical ; / * child element attribute box-orient predetermined frame should be arranged horizontally or vertically. horizontal: horizontal, vertical: Vertical * /
Word-BREAK: BREAK-All; / * Word processing method predetermined properties BREAK-wrap, break-all: allows the word wrap. * /
}
</ Style>
<Script>
function gettextareavalue1 () {
var = strHTML "<font Color = \" Red \ ">. 1 </ font> 2"
document.getElementById ( "TextArea").
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>