table单元格最大宽度和列数的设置，并且超出部分末尾显示省略号

最新推荐文章于 2024-12-06 20:19:56 发布

海底兩萬里

最新推荐文章于 2024-12-06 20:19:56 发布

阅读量3.2k

点赞数 2

本文链接：https://blog.youkuaiyun.com/wxmwzz/article/details/90743794

版权

本文分享了一种使用CSS实现表格单元格中文字溢出时显示省略号的方法，包括单行和多行省略的实现代码。通过设置宽度、高度、文本溢出等属性，可以有效控制单元格内容的显示，适用于网页布局优化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

要实现table单元格最大宽度和列数的设置，并且超出部分末尾显示省略号，终于解决。

参考：

https://blog.youkuaiyun.com/qq_27064559/article/details/81739463

https://bbs.youkuaiyun.com/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" οnclick="alert(this.textarea)"><font color="red">11</font>2</td>
<td class="ell2" οnclick="textarea.outerHTML=" 12"><font color="#FF0000">11111111111111111111111111111111111111111111111111111111111111111111111</font>2</td>
</tr>
<tr>
<td class="ell2" οnclick="gettextareavalue1()">000000000<font color="#FF0000">10</font>000000002000000000300000000040000000005</td>
<td class="ell2" οnclick="gettextareavalue2()">22</td>
</tr>
</table>

<textarea id="textarea" rows="3" cols="20" >
w3school
</textarea>

</body>
</html>